我正在制作一个网站(荷兰语)，我在一台带外接屏幕的笔记本电脑上工作。外部屏幕的分辨率比我的笔记本电脑屏幕的分辨率高，因此在另一个屏幕上查看时网站会失真。我该如何解决这个问题？
<!DOCTYPE HTML>
<html>
<head> <style type="text/css">
body {
background-color: #D8D8D8;
}
nav {
/* Dit is voor de menubalk bovenin. */
position: relative;
background-color: black;
width: 100%;
height: 110px;
top: -16px;
left: -7.8px;
padding: 8px;
}
.menutekst1 {
position: relative;
width: 150px;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 40px;
font-family: verdana;
}
.menutekst2 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 25px;
font-family: verdana;
}
.menutekst3 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 50px;
font-family: verdana;
}
.menutekst4 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
font-family: verdana;
}
#logo {
/* Dit is voor het logo rechts bovenin. */
position: absolute;
top: 30px;
left: 0px;
width: 300px;
}
#facebook {
/* Dit is voor het Facebook logo rechts bovenin. */
position: absolute;
top: 30px;
left: 320px;
width: 70px;
}
#hometekst {
/* Dit is voor de tekst op de home pagina. */
position: relative;
text-align: center;
font-size: 20px;
font-family: Verdana;
}
#home1 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: left;
left: 0px;
/* left: 40px; */
}
#home2 {
position: relative;
display: inline;
width: 320px;
height: 161px;
float: right;
left: px;
right: 250px; */
}
#home3 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: right;
/* right: 50px; */
}
</style>
</head>
<body>
<nav>
<ul>
<img id="logo" src="Foto/logoalgemeen.png" />
<a href="https://www.facebook.com/pages/Ve-screen-Ve-woning-en-scheepsstoffering/369675879764436?fref=ts" target="_blank" title="Facebook"><img id="facebook" src="Foto/facebookalgemeen.png" /></a>
<div class="menutekst4"><li>Contact </li></div>
<div class="menutekst2"><li>Wat doen wij </li></div>
<div class="menutekst3"><li>Producten</li></div>
<div class="menutekst1"><li>Home</li></div>
</ul>
</nav>
<p id="hometekst">
<strong>Welkom bij VE-Screen</strong><br>
Ve-stoffering is een betrouwbare partner, denkt met u mee<br>
en weet wat kwaliteit is of het nu gaat om uw woning, schip<br>
of kantoor.<br>
Onze kracht is de ervaring en goede samenwerking met u<br>
als klant, de interieurbouwers en andere aannemers zodat<br>
alles perfect op elkaar afgestemd en opgeleverd wordt.<br>
Desgewenst incl. stoffering van banken, het leveren van<br>
matrassen en bedtextiel en natuurlijk het plaatsen van ons<br>
eigen Ve-screen zonwering.
</p>
<img id="home3" src="Foto/home3.png" />
<img id="home2" src="Foto/home2.png" />
<img id="home1" src="Foto/home1.png" />
</body>
</html>
最佳答案
我认为这是因为您将宽度用作百分比，然后绝对定位您的按钮。这意味着 100% 值将适应屏幕尺寸，但不会适应按钮的位置，因为它们将始终使用每个屏幕的相同值进行绝对定位。
一种解决方案是使用一个精确的宽度值，另一种解决方案是不绝对定位按钮，而是使用按钮的 float 属性。希望这会有所帮助。
关于html - 切换分辨率时布局会发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20892387/