推荐一个基于Vue 的 H5 快速开发模板

在移动端网页开发时，样式适配始终是一个绕不开的问题。对此目前主流方案有 vw 和 rem（当然还有 vw + rem 结合方案），其实基本原理都是相通的，就是随着屏幕宽度或字体大小成正比变化。因为原理方面的详细资料网络上已经有很多了，就不在这里赘述了，下面主要提供一些这工程方面的工具。
关于 rem，阿里无线前端团队在 15 年的时候基于 rem 推出了 flexible 方案，以及 postcss 提供的自动转换 px 到 rem 的插件 postcss-pxtorem。
关于 vw，可以使用 postcss-px-to-viewport 进行自动转换 px 到 vw。postcss-px-to-viewport 相关配置如下：
“postcss-px-to-viewport”: {
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是375
viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: [’.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 媒体查询里的单位是否需要转换单位
}
复制代码