如何實現自適應頁面響應式布局

當我們在做網頁時，應當充分考慮到網頁自適應的問題

否則可能會出現同乙個網頁在不同的螢幕尺寸上排版布局混亂的情況

在網頁**的頭部，加入一行viewport元標籤

width：控制 viewport 的大小，可以指定的乙個值，如 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 css 的畫素）

height：和 width 相對應，指定高度

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例，1.0就是佔網頁的100%

maximum-scale：允許使用者縮放到的最大比例

minimum-scale：允許使用者縮放到的最小比例

user-scalable：使用者是否可以手動縮放

用百分比去寫元素的寬度，不要寫絕對寬度

.mydiv

width = 實際總寬度

可以通過設定 css 的 box-sizing 屬性來控制

讓子元素撐起父元素的高度，而不要寫絕對高度

.parent

.child

**字型使用相對大小"em"或"rem"**

h1

的大小也用百分比表示

img

當網頁需要在移動端和pc端展示時，由於二者螢幕尺寸差別較大，可能需要用兩種不同的布局才能更加友好地展示內容

此時可以使用**查詢來檢測螢幕(或瀏覽器視窗)的大小，然後採用相應的css樣式來渲染頁面

當我們在做網頁時，應當充分考慮到網頁自適應的問題否則可能會出現同乙個網頁在不同的螢幕尺寸上排版布局混亂的情況在網頁的頭部，加入一行viewport元標籤 width 控制 viewport 的大小，可以指定的乙個值，如 600，或者特殊的值，如 device width 為裝置的寬度單位為縮...

什麼是響應式布局響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。什麼是自適應式布局自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新...

如何實現自適應頁面 響應式布局