移動WEB的頁面布局

隨著移動網際網路的日益普遍，現在移動版本的web應用也應用而生，那麼在做移動web頁面布局的過程中，應該注意哪些要點呢？現把個人的一些學習經驗總結如下：

1px = 2dp

dp dpr dpi ppi

ios的viewport為980px

布局：layout viewport

檢視：visual viewport

meta標籤：語法

width: 設定布局viewport的特定值（「device-width」）

initial-scale: 設定頁面的初始縮放 （「1」）

minimum-scale: 最少縮放

maximum-scale: 最大縮放

user-scalable: 使用者能否縮放（「no」）

display: -webkit-flex: 標識使用彈性布局

flex: num 佔容器的比例

不定寬高的水平垂直居中

傳統布局==> position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);

flexbox==> justify-content: center; align-items: center; display: -webkit-flex;

ios 可以使用最新的flex布局

android4.4以下, 只能相容舊版的flexbox布局

android4.4及以上，可以使用最新的flex布局

在移動web頁面上渲染，為了避免產生模糊，的寬高應該用物理畫素單位渲染，即是100*100的，應該使用100dp*100dp。

width: (w_value/dpr) px;

height: (h_value/dpr) px;

根本原因：1px使用2dp渲染

實現方案：使用元素偽類的方法，以li元素為例  

li.before

rem: 是根據html的font-size為相對單位，和em相比，rem更能作為全域性統一設定的度量單位

rem = screen.width / 20

比如：

// 預設320px

html 
// iphone6
@media (min-device-width: 375px) } 
// iphone6 plus
@media (min-device-width: 414px) 
}

// 單行文字溢位

.inaline 
// 多行文字溢位
.intwoline

高效移動web布局

需求 根據元素個數不同，自動填充 解決 flex布局 基本使用 parent item1 item2 彈性布局，以1 2劃分 移動端一般用的比較多的是混合彈性布局，如下需要固定，文字按比例縮放 混合彈性布局實現方式如下 水平垂直居中 flex布局還可以實現水平垂直居中，並且多次使用 self tab...

Web移動端布局

螢幕尺寸是指螢幕對角線的長度，單位為英吋，1英吋 2.54厘公尺 常見移動端裝置螢幕尺寸 iphone4 3.5英吋 iphone6,7,8 4.7英吋 iphone6,7,8 plus 5.5英吋 iphone5 4英吋 螢幕解析度是指橫縱方向上的畫素點數，單位為px，1px 1畫素點 常見移動端...

web移動端布局

對移動端適配不熟悉的同學，可以看看 使用flexible實現手淘h5頁面的終端適配 再聊移動端頁面的適配 如何在vue專案中使用vw實現移動端適配 vw 是什麼？vw viewport s width 簡寫，1vw 等於 window.innerwidth 的 1 vh viewport s hei...