適應屏幕分辨率

-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

適應屏幕分辨率

回答

相關問題