1. 程式人生 > >響應式佈局基礎三:webapp佈局

響應式佈局基礎三:webapp佈局

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

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

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

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

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

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

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

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

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

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

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

參考資料: