发表于： 2019-10-28 22:27:16
1 907
今天完成的事情：
1 做了移动端的适配
因为用的是vant，vant中是用px，所以得先转化
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：
- postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
- lib-flexible 用于设置 rem 基准值
明天计划的事情：
1 优化代码
遇到的问题：
1 暂无
收获：
1 flexible方案(由于viewport单位得到众多浏览器的兼容，上面这种方案现在已经被官方弃用)
flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局
它的核心代码非常简单：
rem 是相对于html节点的font-size来做计算的
我们通过设置document.documentElement.style.fontSize就可以统一整个页面的布局标准
上面的代码中，将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。
这时，我们只需要将UI出的图转换为rem即可
以iPhone6为例：布局视口为375px，则1rem = 37.5px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 37.5 = 2rem
当然，每个布局都要计算非常繁琐，我们可以借助PostCSS的px2rem插件来帮助我们完成这个过程
2 vh、vw方案
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。
- vw(Viewport's width)：1vw等于视觉视口的1%
- vh(Viewport's height) :1vh 为视觉视口高度的1%
- vmin : vw 和 vh 中的较小值
- vmax : 选取 vw 和 vh 中的较大值
如果视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素）,我们只需要将它设置为75 / 3.75 = 20vw。
这里的比例关系我们也不用自己换算，我们可以使用PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据UI给的设计图写px单位即可
px转换成vw不一定能完全整除，因此有一定的像素差
比如当容器使用vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合calc()函数使用等等
3 rem随设备宽度自适应(根据dpr的值)，scale的值固定为1
4 rem随设备宽度做自适应，viewport标签进行缩放，scale的值不固定
返回列表
评论