想讓我的網頁分辨率有依賴性嗎？

我正在創建一個網站，我在其中創建了單個頁面。該頁面以1366 X 768屏幕分辨率完美顯示。想讓我的網頁分辨率有依賴性嗎？

但是，當我在1024 x 768分辨率下打開相同的頁面時，按鈕和某些文本會消失。

我想以某種方式編寫CSS，以便在分辨率中調整或正常工作。屏幕截圖下方顯示我的問題。

在1366 X 768 Resolution Page Looks Perfct！ - >http://i50.tinypic.com/ac6blc.jpg

在1024 X 768分辨率有些元素下降!!! - >http://i50.tinypic.com/2vxnjva.png

有人可以看我的代碼，並建議我進行更改，使頁面在兩個分辨率上正常顯示。

非常感謝。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      /*=======Global Styles==========*/ 
      body { 
       font-family:Geordia, serif; 
       margin:0; 
       padding:0; 
      } 
      a { 
       color:#3E97FB; 
      } 
      /*==============Container=========*/ 
      div#container { 
       position:relative; 
       width:100%; 
      } 
      #header { 
       position:absolute; 
       top:5px; 
       width:100%; 
       background:#FFFFFF; 
      } 
      /*========Header 1=========*/ 
      #header1 { 
       position:absolute; 
       background:url(images/images/headerbg.png) repeat-x; 
       width:100%; 
       height:111px; 
       left: 0px; 
       top: 96px; 
      } 
      #header1 #form { 
       float:left; 
       margin-left:8%; 
       margin-top:8px; 
       height:70px; 
       width:665px; 
      } 
      #form .email { 
       float:left; 
       margin-right:190px; 
       font-family:Arial; 
       font-size:12px; 
       font-weight:bold; 
       color:#FFF; 
      } 
      #form .password { 
       float:left; 
       margin-right:2%; 
       font-family:Arial; 
       font-size:12px; 
       font-weight:bold; 
       color:#FFF; 
      } 
      .clear { 
       clear:both; 
      } 
      #form .input { 
       float:left; 
       width:200px; 
       padding:7px 7px; 
       margin-right:5px; 
       width:200px; 
       border-bottom: 1px double #171717; 
       border-top: 1px double #171717; 
       border-left:1px double #333333; 
       border-right:1px double #333333; 
      } 
      #header1 .seprator { 
       float:left; 
       margin-left:30px; 
       background:url(images/images/line.png); 
       width:2px; 
       height:72px; 
       margin-top:15px; 
      } 
      #header1 .register { 
       float:left; 
       margin-left:6%; 
       margin-top:8px; 
       width:280px; 
       height:70px; 
      } 
      .register .noac { 
       color:#FFF; 
       font-family:"Trebuchet MS"; 
       font-weight:bold; 
       text-align:center; 
      } 
      .loginbtn { 
       float:left; 
       display: inline-block; 
       width:186px; 
       height:40px; 
      } 
      .advertiserbtn { 
       display: inline-block; 
       margin:10px; 
      } 
      .publisherbtn { 
       display: inline-block; 
       margin:10px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <div id="header-line"></div> 
      <div id="header"></div> 
      <!--End header--> 
      <div id="header1"> 
       <div id="form"> 
        <div class="email">Email:</div> 
        <div class="password">Password:</div> 
        <div class="clear"></div> 
        <input type="text" class="input" /> 
        <input type="text" class="input" /> 
        <input type="button" class="loginbtn" value="Login" /> 
        <div class="clear"></div> 
       </div> 
       <!--From Div End --> 
       <div class="seprator"></div> 
       <div class="register"> 
        <div class="noac">Don't have an account yet!</div> 
        <input type="button" class="advertiserbtn" 
        value="Free Register" /> 
        <input type="button" class="publisherbtn" value="Premium Registration" 
        /> 
       </div> 
      </div> 
      <!--End header1--> 
      <div id="footer"></div> 
     </div> 
     <!--End footer--> 
     </div> 
     <!--End Content Div--> 
    </body> 
</html>

來源

2013-02-04 user210111

搜索谷歌的響應網頁設計 –

-3

您應該嘗試指定尺寸的百分比，而不是所有的像素。

來源

2013-02-04 09:30:41 Ananth

使用CSS媒體查詢在屏幕分辨率下降時更改元素的大小。這可以進行多次，甚至可以讓您的元素重新調整大小和重新排序以適應移動屏幕分辨率。這裏有一個例子：

@media screen and (max-width:1366px){ 
    .loginbtn { 
       float:left; 
       display: inline; 
       width:186px; 
       height:40px; 
      } 
} 

@media screen and (max-width:1024px){ 
    .loginbtn { 
       float:left; 
       display: inline; 
       width:156px; 
       height:40px; 
      } 
}

更好的做法可能是將所有的寬度也設置爲精確的比例，使他們重新大小，你的瀏覽器。希望這可以幫助。

來源

2013-02-04 09:37:51

這與我們使用圖像作爲背景的按鈕有關嗎？ – user210111

上述媒體查詢只是一個例子，您可以將它們與頁面上的所有元素（即div和表）一起使用。如果您需要和圖像來填充div，您可以設置div的大小，然後使用'background-image：contains'將圖像保存在div中。 –

我想你想要的是該頁面不會比特定值小。實現這個最簡單的方法是給你一整個頁面min-width。如果窗口變小，將出現水平滾動條。

來源

2013-02-04 09:46:28 Nemo64

哪些類需要定義最小寬度？身體？？ – user210111

@ user210111正文或您的#content div – Nemo64

想讓我的網頁分辨率有依賴性嗎？

回答

相關問題