移动WEB的页面布局
? ? ? ? 隨著移動(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元素為例??
- ? 相對(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
? ? 比如:
? ? 不使用rem的情況: font-size
- ? 文本溢出
要點(diǎn)六、Tap基礎(chǔ)事件
要點(diǎn)七、Touch基本事件
要點(diǎn)八、彈性滾動(dòng)
?
持續(xù)更新中......
總結(jié)
以上是生活随笔為你收集整理的移动WEB的页面布局的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 60.Linux:虚拟机安装及基本操作
- 下一篇: cad添加自己线性_如何在CAD中添加自