如何使用視口元標記來縮放固定寬度的佈局以適合不同的屏幕寬度

Question

我正在研究固定寬度的遺留網站，並希望通過實現一對自適應佈局爲平板電腦用戶創建更優化的體驗。第一個佈局將是一個600px寬的設計，它將顯示在600px - 768px屏幕寬度的設備上。第二個自適應佈局將是一個769px寬的設計，它將顯示在屏幕寬度爲769-1023的設備上。

我想知道如何使用視口元標記使設計擴大適合寬度大於原始設計寬度的移動瀏覽器。

例如，當在具有768px瀏覽器屏幕寬度的設備上查看600px設計時，如何讓較小的設計佔用屏幕的整個寬度？

我發現了很多關於流體網格自適應佈局的信息，但沒有具體談到固定寬度網站的設計寬度和視口大小之間的關係 - 至少不是我能理解的。

Answer 1

它被稱爲響應式web開發。 第一步是在頭標籤部分的代碼中放置下面的標籤。

對於響應式設計使用媒體查詢： 現在使用媒體查詢，這裏是media queries的很好例子。也學習如何使用它。 這裏是一小段代碼，它將指導您如何使用： -

 <style> 
     .clear{ clear:both;} 
     /*this will work for desktop*/ 
     @media only screen and (min-width: 801px){ 
     #container { 
      position:relative; 
      width:80%; 
      margin: 0 auto; 
     } 
     /*this will work for tablet*/ 
    @media only screen and (max-width: 800px) and (min-width: 521px) 
    { 
    #container { 
     position:relative; 
     width:80%; 
     margin: 0 auto; 
    } 
     /*this will work for mobile*/ 
     @media only screen and (max-width: 520px) and (min-width: 320px) 
     { 
     #container { 
      position:relative; 
      width:80%; 
      margin: 0 auto; 
     } 

</style>