移动端布局

参考链接：抖音-移动端适配

一、移动端布局

1. 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。

flexible的变化参考链接

2. hotcss.js
   hotcss移动端布局
   demo示例
3. viewport+postcss-px-to-viewport 适配方案
   vue-h5-template
4. 媒体查询@media

二、1px问题解决：

主要是因为设计图的1px和我们实际效果出来的不一致，dpr为2的屏幕1px里其实渲染了2个物理像素，导致会很粗，我们只需要它渲染1个物理像素，也就是0.5px。

• border-image
• background-image
• transform:scale(0.5) （推荐）
• svg
• 设置viewport