postcss-pxtorem


  在vue项目中,使用rem进行布局,如果自己一个一个写样式会很麻烦,接下来介绍这种开发方式,配置rem,即可用 px 来开发,会自动帮我们转成rem 

  在 public 文件中,我们要引入rem.js 的插件

  然后在项目的根目录下创建 postcss.config.js 文件 , 这样配置一下

  module.exports = {
      plugins: {
        'autoprefixer': {
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
          ]
        },
        'postcss-pxtorem': {
          rootValue: 37.5,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
          propList: ['*']
        }
      }
  }
  好了之后,我们就可以使用 px 来开发了,他会自动帮我们做rem换算


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM