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

要點一、piexl

? 1px = 2dp
? dp dpr dpi ppi

要點二、viewport

? ios的viewport為980px
? 布局：layout viewport
? 視圖：visual viewport
? ? meta標簽：語法 <meta name="viewport" content="name=value, name=value">
? ? width: 設置布局viewport的特定值（“device-width”）
? ? initial-scale: 設置頁面的初始縮放 （“1”）
? ? minimum-scale: 最少縮放
? ? maximum-scale: 最大縮放
? ? user-scalable: 用戶能否縮放（“no”）
? ? <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

要點三、Flexbox彈性盒子布局

• 如何使用flexbox布局：

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;

• flexbox的兼容性：

IOS 可以使用最新的flex布局

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

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

要點四、響應式布局

• ? 媒體查詢
• ? 百分比布局
• ? 彈性圖片：max-width: 100%
• ? 重新布局，顯示與隱藏

要點五、移動web特別樣式處理

• ? 高清圖片的處理方案

? ? 在移動web頁面上渲染圖片，為了避免圖片產生模糊，圖片的寬高應該用物理像素單位渲染，即是100*100的圖片，應該使用100dp*100dp。
? ? width: (w_value/dpr) px;
? ? height: (h_value/dpr) px;

• ? 一像素邊框

? ? 根本原因：1px使用2dp渲染
? ? 實現方案：使用元素偽類的方法，以li元素為例??

li.before {position: absolute;top: -1px;left: 0;content: '';width: 100%;height: 1px;? border-top: 1px solid #ddd;-webkit-transform: scaleY(0.5);}

• ? 相對單位rem

? ? em: 是根據父節點的font-size為相對單位，但是在多層嵌套下，變得非常難以維護
? ? rem: 是根據html的font-size為相對單位，和em相比，rem更能作為全局統一設置的度量單位

? ? rem = screen.width / 20
? ? 比如：

// 默認320px html {font-size: 32px;}// iphone6 @media (min-device-width: 375px) {html {font-size: 37.5px;} }// iphone6 plus @media (min-device-width: 414px) {htmlfont-size: 41.4px;} }

? ? 不使用rem的情況: font-size

• ? 文本溢出

// 單行文本溢出 .inaline {overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }// 多行文本溢出 .intwoline {display: -webkit-box !important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2; }

要點六、Tap基礎事件
要點七、Touch基本事件
要點八、彈性滾動

?

持續更新中......

總結

以上是生活随笔為你收集整理的移动WEB的页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。