PostCSS的插件 -- 关于vue rem适配布局方案

最新推荐文章于 2022-03-08 16:19:25 发布

终极前端开发协会

最新推荐文章于 2022-03-08 16:19:25 发布

阅读量320

点赞数

分类专栏： IT民工前端 css 文章标签： css vue 移动端布局手机端适配方案

本文链接：https://blog.csdn.net/qxfjyk/article/details/102476465

版权

个人习惯，有人喜欢所有的配置都放到了vue.config.js（vue-cli3.0默认没有此文件，需要你创建一个）中（一般会在里面配置有代理跨域）

摘要由CSDN通过智能技术生成

PostCSS的插件

记以下三种

postcss-plugin-px2rem
postcss-pxtorem
postcss-px2rem

任选一种，最近大家推荐第一种（在配置上多了配置选项上有 exclude 属性，可配置是否对某个文件夹下的所有css文件不进行转换），之前我用的第二种（也是目前使用最多的）
都有可以配置selectorBlackList: [] 要忽略并保留为px的选择器
还有个小技巧 – 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。

使用方法
选择你要用的插件安装依赖： npm i postcss-plugin-px2rem -D或 npm i postcss-pxtorem -D 或 npm i postcss-px2rem -D

配置方法

换算单位 pc端一般基数为37.5，移动端一般为16或者32

用vue init webpack projectName 创建的项目，postcss配置文件在根目录下 .postcssrc.js
（该文件为使用vue init自动创建的文件）

module.exports = {
   
  "plugins": {
   
    "postcss-import": {
   },
    "postcss-url": {
   },
    "autoprefixer": {
   },
    // 新增
    /**
     * postcss-plugin-px2rem 配置
     * 详见官方文档
    */
    'postcss-plugin-px2rem': {
   
        // rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 
        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
        //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
        // propBlackList: [], //黑名单
        exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
        // selectorBlackList: [], //要忽略并保留为px的选择器
        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
        // replace: true, // （布尔值）替换包含R