HTML如何將網頁設計自動適應螢幕寬度

今天本文主要和大家談談HTML如何將網頁設計自動適應螢幕寬度 ,需要的朋友可以參考下，希望能幫助大家。

允許網頁寬度自動調整

「自適應網頁設計」到底是怎麼做到的？其實並不難。

首先，在網頁程式碼的頭部，加入一行viewport元標籤#。

#viewport是網頁預設的寬度和高度，上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

所有主流瀏覽器都支援這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

不使用絕對寬度

因為網頁會依照螢幕寬度調整佈局，所以無法使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。這一條非常重要。

具體來說，CSS程式碼不能指定像素寬度：<span style="font-family:'Courier New';font-size:14px;">width:xxx px;</span>只能指定百分比寬度：<span style="font-family:'Courier New';font-size:14px;">width: xx%; </span>或<span style="font-family:'Courier New';font-size:14px;">width:auto;</span>

<span style="font-family:'Courier New';font-size:14px;">#相關推薦：</span>

網頁自適應畫面寬度 

HTML5響應式(自適應)網頁設計

自適應畫面大小的網頁是怎麼做出來的

以上是HTML如何將網頁設計自動適應螢幕寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！