postcss-pxtorem 学习与使用

1. 安装lib-flexible 和 postcss-pxtorem

安装

npm install lib-flexible --save

或

yarn add lib-flexible --save

npm install postcss postcss-pxtorem --save-dev

或

yarn add postcss postcss-pxtorem --save-dev

2. 在main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

3. 配置postcss-pxtorem
   在根目录的.postcssrc.js或者postcss.config.js文件中修改
   此文件自动生成，若没有，手动添加（创建上面两个文件其中一个就可以）

module.exports = {
  "plugins": {
    "autoprefixer": {},
    'postcss-pxtorem': {
      rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
      propList: ['*']//（数组）可以从 px 更改为 rem 的属性  使用通配符*启用所有属性。例子：['*']
    }
  }
}

4. options
   Type: Object | Null
   Default:

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0,
    exclude: /node_modules/i
}

• rootValue (Number | Function) Represents the root element font size or returns the root element font size based on the input parameter
• unitPrecision (Number) The decimal numbers to allow the REM units to grow to.
• propList (Array) The properties that can change from px to rem.
  • Values need to be exact matches.
  • Use wildcard * to enable all properties. Example: [’*’]
  • Use * at the start or end of a word. ([‘position’] will match background-position-y)
  • Use ! to not match a property. Example: [’*’, ‘!letter-spacing’]
  • Combine the “not” prefix with the other prefixes. Example: [’’, '!font’]
• selectorBlackList (Array) The selectors to ignore and leave as px.
  • If value is string, it checks to see if selector contains the string.
    • [‘body’] will match .body-class
• If value is regexp, it checks to see if the selector matches the regexp.
  • [/^body$/] will match body but not .body
• replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
• mediaQuery (Boolean) Allow px to be converted in media queries.
• minPixelValue (Number) Set the minimum pixel value to replace.
• exclude (String, Regexp, Function) The file path to ignore and leave as px.
  • If value is string, it checks to see if file path contains the string.
    • ‘exclude’ will match \project\postcss-pxtorem\exclude\path
  • If value is regexp, it checks to see if file path matches the regexp.
    • /exclude/i will match \project\postcss-pxtorem\exclude\path
  • If value is function, you can use exclude function to return a true and the file will be ignored.
    • the callback will pass the file path as a parameter, it should returns a Boolean result.
    • function (file) { return file.indexOf(‘exclude’) !== -1; }

5. 关于忽略属性的消息
   目前，忽略单个属性的最简单方法是在像素单位声明中使用大写字母。

// `px` is converted to `rem`
.convert {
    font-size: 16px; // converted to 1rem
}

// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
    border: 1Px solid; // ignored
    border-width: 2PX; // ignored
}

6. 对于引入vant组件的特殊处理

• vant设计稿为375，当以750设计稿为基础设置时，需要屏蔽vant
• 忽略文件

在postcss-pxtorem对象中添加
exclude: /web/i     //忽略 web下所有文件

针对ipad 和 ipad pro 设备无效，针对这些设备网上找到了方法，记录下

// 在index.html中添加如下代码
<script>
    /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>

7. 补充
   若运行报错 “ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
   直接指定安装postcss-pxtorem版本为5.1.1，就不会报这个错了