移动端适配

143 阅读1分钟
  1. 下载amfe-flexible

    根据网页宽度, 设置html的font-size

    yarn add amfe-flexible
    
  2. 到main.js引入

    import "amfe-flexible"
    
  3. 下载postcss和postcss-pxtorem@5.1.1

    postcss: 后处理css, 编译翻译css代码

    postcss-pxtorem: 把css代码里所有px计算转换成rem

    yarn add postcss postcss-pxtorem@5.1.1
    
  4. 根目录下创建postcss.config.js文件

    对 postcss 进行设置

    module.exports = {
      plugins: {
        'postcss-pxtorem': {
          // 能够把所有元素的px单位转成Rem
          // rootValue: 转换px的基准值。
          // 编码时, 一个元素宽是75px,则换成rem之后就是2rem
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }