網頁自適應的幾種方式。

傳統的自適應布局有幾種：

響應式，根據螢幕大小配置多個樣式檔案。

使用em,rem.rem是頁面的font-size尺寸，不同的頁面設定不同的font-size。

(function
wininitfontsize()
initfontsize();
})();

使用百分比或者flex，鋪滿螢幕，高度字型還使用px.

scale通過拉伸縮小頁面自適應。直接寫死viewport的寬度。這種方式不可以設定minimum-scale=1.0。

<
meta 
name
="viewport"
content
="width=375, user-scalable=no"
>

使用類似rpx的方式：

width: calc((100vw / (750/16)) - 0.1px);
height: calc((100vw / (750/30)) - 0.1px);

假如利用sass倒是可以設定變數，不用一條一條這樣寫。只是這種在瀏覽器中，有時會大得可怕。因為100是瀏覽器的寬度，而不是可使用的寬度。而將100vw寫成100%會不起效果。可能100%是動態的，導致不起作用。

有新的收穫了再來更新文件。

1.文件允許網頁寬度自動調整網頁的原始比例即為螢幕的大小，ie9 viewport元標籤網頁的預設寬度，width device width,是說網頁的初始寬度等於螢幕的寬度，initial scale 1,縮放比例為1倍相容ie老版本需要支援 2.載入css css3 media quer...

文章入口自適應使用 viewport 標籤 viewport 是網頁預設的寬度和高度，上面這行的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0，即網頁初始大小佔螢幕面積的100 使用百分比或 em 要變化的不宜...

允許網頁寬度自動調整自適應網頁設計到底是怎麼做到的？其實並不難。首先，在網頁的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0...