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设计稿，370.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，就不会报这个错了