vue 使用postcss-px2rem-exclude完美解决移动端适配的问题

一、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

二、配置 postcss-px2rem-exclude

    1.在项目的根目录下找到文件.postcssrc.js,在里面添加如下代码

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }

  

然后重新npm run dev,打开控制台可以看到代码中的px已经被转成了rem

注意:

    1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem

    2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了

 

问题:为什么要 忽略node_modules目录下的文件?

答:有时候我们在手机端项目的时候需要导入第三方UI库,例如:VUX,MINT等,这时你就会发现第三方的组件样式都变小了,变小的主要原因是第三库 css一依据 data-dpr="1" 时写死的尺寸,我们使用的flexible引入时 data-dpr不是一个写死了的,是一个动态的,就导致这个问题。

这里就不再修改第三方的UI样式,直接忽略掉,简单直接实用。

相关代码:https://github.com/hwq888/skeleton  可以参考使用

vue 使用postcss-px2rem-exclude完美解决移动端适配的问题

上一篇:开发工具之AndroidStudio


下一篇:jmeter抓包之APP