移动端页面开发（学习笔记）

适配（兼容），适用不同设备。

浏览器、微信、QQ(内置浏览器)、uc。

不需要考虑兼容pc、pad

而pc版本和手机版本分开来做，主要原因是数据交互量大(pc上展示的内容不能完全放到移动端)

---

方式：

百分比(不推荐用)

rem（推荐）

viewport（推荐）

无宽布局

---

viewport：可视区域

---

target-densitydpi:屏幕像素密度

Andriod-Browser和WebView默认屏幕为中像素密度

---

css单位：

px  em(em字体大小，根据父级字体大小计算，若没有默认16px)   %     pc    pt    cm   

rem    vw(view width)   vh(view height)    vmax(最大的视窗宽高中的某一个)    vmin

---

retina:2倍或3倍的屏幕

高清适配：

background-image:-webkit-image-set

image-set：让retina的屏幕看图片更清晰

<img src="icon.png" srcset="icon@2x.png">

<img>使用srcset

---

图标适配：

base64或iconfont

base64:把图片转成64进制编码（不常用）

iconfont：推荐阿里矢量图标库https://www.iconfont.cn/

---

常用设计图尺寸750px，600px

640px（根据iPhone5的320px）,按40分。640/40=16，那么分为16份，每份最大40

750px（根据iPhone6的375px），按50分。750/50按40分，那么分为15份，每份最大50