引言
在当今多设备、多屏幕尺寸的时代，前端开发者面临着一个巨大的挑战：如何让网页在不同的设备上都能完美显示，提供一致的用户体验。为了解决这个问题，出现了许多布局适配方案，如媒体查询、flexbox、grid 等。而 rem 适配作为一种灵活且有效的布局方式，在前端开发中占据着重要的地位。本文将深入探讨 rem 适配的原理、使用方法以及实际应用中的注意事项。
什么是 rem
rem（root em）是一个相对单位，它是相对于根元素（html 元素）的字体大小来计算的。例如，如果根元素的字体大小设置为 16px，那么 1rem 就等于 16px；如果根元素的字体大小设置为 20px，那么 1rem 就等于 20px。与 px 这种固定单位不同，rem 具有灵活性，可以根据根元素的字体大小动态调整元素的尺寸。
rem 适配的原理
rem 适配的核心思想是通过动态改变根元素的字体大小，来实现页面元素在不同设备上的等比例缩放。具体来说，我们可以根据设备的屏幕宽度，计算出一个合适的根元素字体大小，然后将页面中所有元素的尺寸都使用 rem 单位来表示。这样，当屏幕宽度发生变化时，根元素的字体大小也会相应地改变，从而使得页面元素的尺寸也随之等比例缩放。
如何实现 rem 适配
手动计算
最简单的方法是手动计算根元素的字体大小和元素的 rem 值。假设我们以设计稿宽度为 750px 为例，设计稿上一个元素的宽度为 150px。我们可以先确定一个基准字体大小，比如在 750px 宽度的屏幕上，根元素字体大小设置为 100px。那么这个元素在设计稿上的宽度换算成 rem 就是：150 / 100 = 1.5rem。
在不同设备上，我们可以通过 JavaScript 动态计算根元素的字体大小。以下是一个简单的示例代码：
xml
复制代码
**
使用第三方库
vue2rem适配vue/cli
安装插件
想要适配我们需要安装postcss-pxtorem 和 amfe-flexible
csharp
复制代码
npm install postcss-pxtorem
npm install amfe-flexible
或者
yarn add postcss-pxtorem
yarn add amfe-flexible
配置amfe-flexible
需要在main.js 中引入amfe-flexible 才可以使用
arduino
复制代码
import 'amfe-flexible'
配置postcss-pxtorem
配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：
在vue.config.js中配置
css
复制代码
module.exports = {
//...其他配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 192.0, // 设计图除以10 设计图尺寸1920
unitPrecision: 5, // 转换成rem后保留的小数点位数
propList: ['*']// 匹配CSS中的属性，* 代表启用所有属性
})
]
}
}
},
}
在.postcssrc.js或postcss.config.js中配置如下：
ruby
复制代码
module.exports = {
plugins: {
"postcss-pxtorem": {
// 配置文档：https://www.npmjs.com/package/postcss-pxtorem
rootValue: 192.0, // 根元素字体大小 16/1.25 在1920* 1080 分辨率下
unitPrecision: 5, // 转换成rem后保留的小数点位数
propList: ["*"], // 匹配CSS中的属性，* 代表启用所有属性
// exclude: /(node_module)/, // 忽略一些文件，不进行转换，默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [".van"], // 要忽略并保留为 px 的选择器
// mediaQuery: false, //（布尔值）允许在媒体查询中转换px
// minPixelValue: 1, // 设置要替换的最小像素值
},
},
};
直接可以使用
完成上述操作就可以直接在项目中使用了
上述操作是在1920 * 1080分辨率下的，根据自己的需求进行修改配置
xml
复制代码
上面的示例就是在1920 * 1080 分辨率下px转换成rem,从而实现响应式布局
计算方式就是1.04167 * 192 约等于200px
安装
css
复制代码
npm i postcss-pxtorem
npm i autoprefixer
npm i -S amfe-flexible
postcss-pxtorem 是PostCSS的插件，用于将像素单元生成rem单位
autoprefixer 浏览器前缀处理插件
amfe-flexible 可伸缩布局方案 替代了原先的lib-flexible 选用了当前众多浏览器兼容的viewport
autoprefixer和postcss-pxtorem配置
根目录创建postcss.config.js文件
java
复制代码
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": {
rootValue: 192, // 设计稿宽度的1/ 10 例如设计稿按照 1920设计 此处就为192
propList: ["*", "!border"], // 除 border 外所有px 转 rem
selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换
},
},
};
引入amfe-flexible
在main.js中引入amfe-flexible
arduino
复制代码
import "amfe-flexible";
rem 适配的优缺点
优点
灵活性高：rem 单位可以根据根元素的字体大小动态调整元素的尺寸，使得页面在不同设备上能够实现等比例缩放，提供一致的用户体验。
易于维护：使用 rem 单位可以将页面元素的尺寸与根元素的字体大小关联起来，当需要调整页面整体大小时，只需要修改根元素的字体大小即可。
兼容性好：rem 单位在现代浏览器中都有很好的支持，几乎可以在所有设备上正常使用。
缺点
需要额外的计算：使用 rem 单位需要进行一定的换算，尤其是在手动计算时，需要考虑设计稿宽度、基准字体大小等因素，增加了开发的复杂度。
不适用于所有场景：对于一些对精度要求较高的布局，rem 适配可能无法满足需求，因为它是基于等比例缩放的，可能会导致元素尺寸出现一些微小的偏差。
注意事项
字体大小的设置：在使用 rem 适配时，需要注意根元素字体大小的设置。如果根元素字体大小设置得过大或过小，可能会影响页面的布局和显示效果。
兼容性问题：虽然 rem 单位在现代浏览器中都有很好的支持，但在一些老旧浏览器中可能存在兼容性问题。在使用时需要进行充分的测试。
结合其他布局方式：rem 适配并不是万能的，在实际开发中可以结合其他布局方式，如媒体查询、flexbox、grid 等，以实现更加复杂和灵活的布局。
总结
rem 适配是一种非常实用的前端布局适配方案，它通过动态改变根元素的字体大小，实现了页面元素在不同设备上的等比例缩放。无论是手动计算还是使用第三方库，都可以帮助我们轻松实现 rem 适配。当然，在使用 rem 适配时，我们也需要注意一些问题，结合其他布局方式，以达到最佳的布局效果。希望本文能够对大家理解和使用 rem 适配有所帮助。
以上就是关于 rem 适配的详细介绍，大家在实际开发中可以根据项目需求选择合适的适配方案。如果你有任何疑问或建议，欢迎在评论区留言交流,如果喜欢看uncleTom的文章可以帮忙点个关注和收藏。