web移動端布局

對移動端適配不熟悉的同學，可以看看：

使用flexible實現手淘h5頁面的終端適配

再聊移動端頁面的適配

如何在vue專案中使用vw實現移動端適配

vw 是什麼？

vw：viewport』s width 簡寫，1vw 等於 window.innerwidth 的 1%

vh：viewport』s height 簡寫，1vh 等於 window.innerheight 的 1%

vmin：當前 vw 和 vh 中較小值

vmax：當前 vw 和 vh 中較大值

常規的 rem 的適配方案（包括flexible），其實就是通過 js 動態計算，模擬 vw 的效果，過去使用這種方案主要原因是 vw 存在一定的相容問題，不過對於現在而言，vw 也基本能滿足對相容性的要求

可以看到，android 4.4 以上及 ios 8.0 以上均已支援，所以現在我們可以直接使用 vw 來做移動端適配啦

vw + rem 方案

1、設定 html font-size 為 10vw

html

2、以750ui圖為例，在 css 中，直接使用ui圖上的長度值，單位設定為 px

.head

3、引入 postcss-pxtorem 外掛程式，配置如下：

require('postcss-pxtorem')()

以上，就可以使用了 vw + rem 方案實現了移動端適配

4、引入 viewport-units-polyfill 解決相容問題

為了保證在低版本的機型也能正常顯示頁面，可以引入 viewport-units-polyfill 來處理 vw 的相容問題。

viewport-units-polyfill 其實是 viewport-units-buggyfill 的簡化版。

簡單介紹下 viewport-units-buggyfill 的實現思路：通過引入一段js，對於存在相容問題的版本，遍歷頁面中所有的css，找到用到viewport單位的css，將viewport單位計算為 px 單位，並將新的css規則插到head或body中。

viewport-units-polyfill 則是在 viewport-units-buggyfill 基礎上做了些修改，主要是把大量的遍歷工作去掉，只針對 html font-size 做相容處理（此適配方案只在 html font-size 中使用到vw）。去掉遍歷工作，大大優化了效能。

用法：直接將此 js 指令碼放在頁面的 head 中即可

網上對 1px border 問題的解決方案很多，可以看看：再談retina下1px的解決方案

本文分享的方案則是在使用 vw + rem 的適配方案基礎上，使用檢視縮放（viewport scale）來解決 1px border 問題

實現

(
function()
else})
();

思路很簡單，就是講檢視縮放（viewport scale）設定為 1/dpr（裝置畫素比）,從而解決 1px border 的問題

(
function()
});if
(!isiphone && flag)
var scale =
1/ dpr;
var metael = document.
queryselector
('meta[name="viewport"]'
)|| document.
createelement
('meta');
metael.
setattribute
('name'
,'viewport');
metael.
setattribute
('content'
,'width=device-width, initial-scale='
+ scale +
', maximum-scale='
+ scale +
', minimum-scale='
+ scale +
', user-scalable=no, viewport-fit=cover');
if(document.documentelement.firstelementchild)
else})
();複製**

將上面的指令碼放在頁面head中，在開發 1px border 時，可以直接如下：

.border

注意：如果使用了 postcss-pxtorem 類似外掛程式，需要注意不能將此 1px 單位轉換成 rem，我使用的方法是不需要轉換的 px 使用大寫 px，這樣 postcss-pxtorem 就不會轉換（也可以將 postcss-pxtorem 不轉換成rem的最小尺寸設定為1px）

基礎布局其實涵蓋很多方面，如：

頁面整體布局

文案與icon

各種居中對齊（垂直、水平）

文案與icon對齊（icon應該使用iconfont而不是）

z-index 分層

1、頁面整體布局

h5頁面比較常見的布局是頁面分為三部分：head、body、foot，其中head、foot會有吸頂、吸底的效果，常規的使用 fixed布局會存在些問題，推薦將頁面整體使用flex布局，將head、foot固定，body可滾動，如下：

"page"
>
"hd"
>
div>
"bd"
>
div>
"ft"
>
div>
div>

#page
#hd#bd
}複製**

web移動端布局

Web移動端布局

移動Web端流式布局

移動Web開發移動端常見布局 flex布局

web移動端布局

Web移動端布局

移動Web端 流式布局

移動Web開發 移動端常見布局 flex布局

相關推薦

移動Web端流式布局

移動Web開發移動端常見布局 flex布局