lucaslow / H5-Template-Vue

基于Vue2的H5模板

vue-H5

基于 Vue 的 H5 前端项目架构

✅ rem 适配方案

项目配置好了 rem 适配：

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

PostCSS 配置(postcss-pxtorem 6.xxx 以上的版本可能会导致无法自定义配置，所以一般使用 5.xx 版本)

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8',
        'last 10 versions'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*'],
      unitPrecision: 5, //保留rem小数点多少位
      minPixelValue: 12 //px小于12的不会被转换
    }
  }
}