适应屏幕分辨率

-1

因此，出于某种原因，我的网页在我的主屏幕上显示得很好，但它在我的第二台显示器上显示出来。主屏幕分辨率：1440x900，第二屏分辨率：1280x800适应屏幕分辨率

编辑：也是如何使它如此sidescroll消散。

编辑：FIXED SIDESCROLL

屏幕截图：

主屏幕：

main screen

次级屏幕：

secondary screen

html{   
 
} 
 
body {width:90%;margin:auto;min-width:600px;max-width:2000px}  
 

 
#left, #right, #middle { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100%; 
 
    top: 0 
 
      margin-left:auto; 
 
margin-right:auto; 
 
} 
 

 
#middle { 
 
    background-color: red; 
 
right: 500px; 
 
    left: 400px; 
 
    width: 45%; 
 
margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#left { 
 
    background-color: black; 
 
    right: 880px; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%; 
 
} 
 
#right { 
 
    background-color: black; 
 
    left: 880px; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%; 
 
} 
 
#container { 
 
    background: #fff; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    position: relative 
 
     margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%; 
 
    } 
 

 
body { 
 
    font-family: "Comic Sans MS"; 
 
} 
 

 
h4{ 
 
    font-size: 20pt; 
 
} 
 
em{ 
 
    font-weight: bold; 
 
    color:darkslategrey; 
 
} 
 

 
em1{ 
 
    font-weight: bold; 
 
    color:darkslategrey; 
 
} 
 

 
#mijngegevens { 
 
    
 
    top: 50px; 
 
     left: 420px; 
 
     width: 700px; 
 
     height: 400px; 
 
     position: absolute; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
width:80%; 
 
} 
 

 
#joeyvideo { 
 
top: 350px; 
 
    left: 420px; 
 
    height: auto; 
 
    position: absolute; 
 
    
 
    border-style: double; 
 
    border-width: thick; 
 
    border-color: black; 
 
    margin-left:auto; 
 
margin-right:auto;  
 
} 
 

 
#gmaps { 
 
    top: 700px; 
 
    left: 420px; 
 
    position: absolute; 
 
    margin-left:auto; 
 
margin-right:auto; 
 
    width: 80%;   
 
}

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     <link rel="stylesheet" href="style.css"> 
 
    <title>Joey Salads</title> 
 
    </head> 
 
    
 
    <body> 
 
     <div id="left"></div> 
 
     <div id="right"></div> 
 
     <div id="middle"></div> 
 
     <div id="container"></div> 
 
     <div id="mijngegevens"> 
 
     <h4>The best prankster on, youtube!</h4> 
 
     <p><a href="https://www.youtube.com/user/JoeySalads"><b><u><i>Subscribe</i></u></b></a></p> 
 
     <p><em>Name:</em>Sick prankster Afghanistan</p> 
 
     <p><em1>Adress:</em1><a href="https://www.google.nl/maps/place/Peachy+In+The+Secret+Hideout/@1.3041018,103.8581836,17z/data=!4m12!1m6!3m5!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!2sPeachy+In+The+Secret+Hideout!8m2!3d1.3040964!4d103.8603723!3m4!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!8m2!3d1.3040964!4d103.8603723?hl=nl" </a> Secret hideout</p> 
 
     
 
     </div>   
 
     
 
     <div id="gmaps"> 
 
     <iframe width="420" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyC8YwGwvlNWXGcf92JTE6ymhCMNHp5n4MI &q=Secret+Hide+Out+ng+Mga+Gadon,Angeles II, Valenzuela, National Capital Region, Philippines" allowfullscreen></iframe> 
 
     </div>   
 
     
 
     <div id="joeyvideo"><iframe width="420" height="315" src="https://www.youtube.com/embed/CHt7EBCgJnI" frameborder="0" allowfullscreen></iframe></div>    
 
    </body>  
 

 
</body1> 
 
</html>

编辑：图片2

来源

2016-10-03 Karmalegend

你的问题是，你告诉它多少像素投奔到适合您的中间部分。您编码的方式永远不会显示正确，除非每个使用您的网站的人都使用与主显示器相同的屏幕分辨率。

你应该做的，而不是为使用relative positioning，flexbox，或者友好大概最简单，最浏览器是使用诸如bootstrap一个框架，它可以帮助你打好的事情了，你想要的方式。

也 - 删除水平滚动是的话说overflow-x: hidden其身体上的还是其他什么CSS属性，是造成你的侧涡

来源

2016-10-03 16:52:47

如果我组的定位相对于它完全自败一样容易？ – Karmalegend

是的......正如所提到的[这里]（https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/）它是所有定位属性中最令人困惑的选项。我只把它放在答案中，因为它是一个可供您使用的选项。就我个人而言，我会选择他们拥有的bootstrap网格系统，或者使用flexbox的想法。 –

尽我所能，我理解的更少。我对所有这些编码的东西都比较陌生，这要感谢我为解决问题所付出的努力。然而，我会问我的老师一些解释，尽可能的引导想法。 – Karmalegend

适应屏幕分辨率

回答

相关问题