上一遍文章講到了viewport，但是通過效果圖我們可以看出來，有部分網頁內容超出瀏覽器的寬度，以至於瀏覽器出現水平滾動條。

這一遍文章主要就是來解決這個問題。

第一種是：設定viewport，高度固定，寬度使用百分比

這種對於簡單的列表形比較實用。這種佈局方式，通過要為高度進行響應式。

第二種是：設定viewport，寬度和高度都固定，利用瀏覽器本身的功能進行縮放

這種佈局方式不僅適合列表方式，也可以適用於一些複雜的佈局。

根據設計稿的大小，直接設計viewport中的width為設計稿的畫素寬度即可。然後原生的高寬均按照設計稿中的要求設計即可。

當裝置的畫素高或低於我們的viewport width的時候，瀏覽器會自己進行縮放的。（極少部分瀏覽器無法進行縮放，這個時候可以使用指令碼進行動態設定viewport）。

第三種是：動態設定viewport，高寬度都使用相對單位

同第二種一樣，適合於複雜的佈局。

根據設計稿將各元素的單位換算成rem，然後根據螢幕大小，換算html的font-size。

參考資料：