移动端的rem的适配

你好小同志

已于 2022-07-22 10:44:21 修改

阅读量311

点赞数 1

分类专栏： vue 文章标签：移动端适配 px转rem amfe-flexible postcss-pxtorem Vue项目

于 2022-07-19 13:12:42 首次发布

本文链接：https://blog.csdn.net/wangkangyang/article/details/125866665

版权

vue 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

1 安装组件 npm i amfe-flexible

npm i  amfe-flexible

2.在vue main.js 引入

import 'amfe-flexible'

3. 安装插件 postcss-pxtorem

npm i postcss-pxtorem@5.1.1

注意这里需要安装指定banben 否则会报错

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Migration guide for end-users:

4.需要在vue项目根目录里面新建一个.postcssrc.js 文件把下面的文件复制过去保存重启项目

// postcss.config.js
module.exports = {
  plugins: {
    // 配置使用 autoprefixer 插件  vuecli 已经内置配置好了所以直接注释这个段代码就可以了
    // 作用 生成浏览器css样式规则前缀
    // 'autoprefixer' : {
    // 配置浏览器的兼容
    //  browsers : ['Android >=4.0' , 'ios>=8']
    // }
    "postcss-pxtorem": {
      // lib-flexible 的rem 适配方案 把一行分成10分
      // 所以rootvalue应该设置为设计搞的10/1
      // 我们的设计稿一般是750 所以是75 但是vant 是根据 375宽度写的 必须设置为37.5  唯一的缺点就是设计稿/2
      //  如果是vant 的37.5 如果是自己的就设置为75
      //  rootValue 根据文档是有两种写法的 一种是数字一种是函数
      // rootValue: 37.5,
      rootValue({ file}) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      // *表示所有的属性都要改成rem样式 也可以单独设置例如 prolist:['height']
      propList: ["*"],
    },
  },
};

注意：不能转换行内样式的px --》 rem