? ? ? ? 隨著移動(dòng)互聯(lián)網(wǎng)的日益普遍，現(xiàn)在移動(dòng)版本的web應(yīng)用也應(yīng)用而生，那么在做移動(dòng)web頁(yè)面布局的過(guò)程中，應(yīng)該注意哪些要點(diǎn)呢？現(xiàn)把個(gè)人的一些學(xué)習(xí)經(jīng)驗(yàn)總結(jié)如下：

要點(diǎn)一、piexl

? 1px = 2dp
? dp dpr dpi ppi

要點(diǎn)二、viewport

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

要點(diǎn)三、Flexbox彈性盒子布局

• 如何使用flexbox布局：

display: -webkit-flex: 標(biāo)識(shí)使用彈性布局

flex: num 占容器的比例

• 日常編程中常遇到的案例:

不定寬高的水平垂直居中

傳統(tǒng)布局==> 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布局

要點(diǎn)四、響應(yīng)式布局

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

要點(diǎn)五、移動(dòng)web特別樣式處理

• ? 高清圖片的處理方案

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

• ? 一像素邊框

? ? 根本原因：1px使用2dp渲染
? ? 實(shí)現(xiàn)方案：使用元素偽類(lèi)的方法，以li元素為例??

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

• ? 相對(duì)單位rem

? ? em: 是根據(jù)父節(jié)點(diǎn)的font-size為相對(duì)單位，但是在多層嵌套下，變得非常難以維護(hù)
? ? rem: 是根據(jù)html的font-size為相對(duì)單位，和em相比，rem更能作為全局統(tǒng)一設(shè)置的度量單位

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

// 默認(rèn)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; }

要點(diǎn)六、Tap基礎(chǔ)事件
要點(diǎn)七、Touch基本事件
要點(diǎn)八、彈性滾動(dòng)

?

持續(xù)更新中......

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。