Rem适配方案

2022-06-30 21:43:00
2024-06-18 07:23:26

为什么要用 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 的单位了

目录
暂无评论,欢迎留下你的评论

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

昵称
留言
赞赏金额