Vue + amfe-flexible + postcss-px2rem-exclude实现移动端适配

是个前端

已于 2022-09-21 11:15:39 修改

阅读量432

点赞数

文章标签： vue

于 2021-03-03 12:46:43 首次发布

本文链接：https://blog.csdn.net/HWJBJ/article/details/114305421

版权

Vue + amfe-flexible + postcss-px2rem-exclude实现移动端适配

vue版本 2.6.x
amfe-flexible 安装这个插件，可以实现 随着屏幕宽度大小，动态修改html 根节点 字体
postcss-px2rem-exclude 安装这个插件，可以将项目中px 单位修改为rem

// 第一步安装 lib-flexible
 npm install amfe-flexible --save

// 第二步main.js 引入lib-flexible
import "amfe-flexible/index.js"

// 第三步安装 postcss-px2rem-exclude
 npm install postcss-px2rem-exclude --save

// 第四步在vue.config.js中配置 postcss-px2rem-exclude
css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          require('postcss-px2rem-exclude')({
            remUnit: 75,
            exclude: /node_modules|folder_name/i  //引入的组件不进行单位转义
          })
        ]
      }
    }
  },

// 如果不想px 被转义 写样式时 后面加/*no */，就可以了 
// 如：font-size: 32px; /*no */