Question

我正在制作一个网站（荷兰语），我在带有外部屏幕的笔记本电脑上工作。外部屏幕有另一个分辨率，然后是我的笔记本电脑屏幕，因此当在另一个屏幕上查看时，该网站会出现扭曲。我该如何解决这个问题？

<!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>

Answer 1

我认为这是因为你将宽度用作百分比，然后绝对定位你的按钮。这意味着100％的值将适应屏幕尺寸而不是按钮的位置，因为它们将始终使用相同的值为每个屏幕绝对定位。

一种解决方案可能是使用一个精确的宽度值，另一种解决方案是不要绝对定位按钮，而是使用float属性作为按钮。希望这会有所帮助。

切换分辨率时布局发生变化

1 个答案: