参考链接:抖音-移动端适配
一、移动端布局
-
flexible+postcss-pxtorem
vue-h5-template- 老版本:动态去计算scale,并不影响rem的计算,好处是解决了1px的问题,但是第三方库一般都用dpr为1去做的,这就导致地图或者图标变小,另外老版本对android不支持高清方案,是个缺陷。
- 新版本:新版本2.0里面则去掉了动态计算scale的方式,改为检测是否支持0.5px的特性,通过添加类名hairlines来向下兼容。
body的font-size大小和dpr有关系,dpr=1则为12px, dpr=2,则为24px,dpr=3,为36px。
- hotcss.js
hotcss移动端布局
demo示例 - viewport+postcss-px-to-viewport 适配方案
vue-h5-template - 媒体查询@media
二、1px问题解决:
主要是因为设计图的1px和我们实际效果出来的不一致,dpr为2的屏幕1px里其实渲染了2个物理像素,导致会很粗,我们只需要它渲染1个物理像素,也就是0.5px。
- border-image
- background-image
- transform:scale(0.5) (推荐)
- svg
- 设置viewport