适配(兼容),适用不同设备。
浏览器、微信、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