小白龙博客 | 小白龙博客

Rem适配方案

2022-07-01 05:43:00

2025-01-18 11:41:25

为什么要用 rem

相对于 rem 来说，vw 适配能更好的适配移动端，但如果既需要适配移动也需要适配 PC
vw 的适配在 pc 显示时会显得格外的大，
rem 就会相对好些，这里只针对一些简单页面解决方案，复杂项目会有专门的一套解决方案

一、安装命令

shell 复制代码

npm i amfe-flexible postcss-pxtorem autoprefixer -S

1、amfe-flexible

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

在 main.js 中引入即可

js 复制代码

import 'amfe-flexible/index.js'

2、pxtorem

将项目中css的px转成rem单位，免去计算烦恼

新建.postcssrc.js或者postcss.config 文件，在文件添加：

js 复制代码

//.postcssrc.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'],
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!font-size'],
      exclude: /node_modules|folder_name/i,
    },
  },
};

js 复制代码

//postcss.config
module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
        },
        'postcss-pxtorem': {
            //1rem等于100px
            rootValue: 100,
            propList: ['*'],
            unitPrecision: 5,
            //忽略 node_modules 目录，否则会导致 Vant 样式无法被编译。
            exclude: /node_modules|folder_name/i,
        }
    }
}

3、在head中加入

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

二、完成检查

配置完之后，需要重启服务，运行即可看到都是 rem 的单位了

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论