请看下面的攻略：
关于rem适配的3种常用封装
什么是rem适配？
rem适配是指将页面布局中的px单位转换成rem单位，以此来适配不同尺寸的设备屏幕。通过rem适配可以使页面在不同尺寸的设备上，都能够正常显示。
常用的3种rem适配封装方式
1. 原生js封装
在原生js封装中，我们可以使用window.onresize方法监听屏幕尺寸的变化，然后动态改变html元素的font-size属性值，从而实现rem适配。示例代码如下：
(function (doc, win) {
const docEl = doc.documentElement
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = function () {
const clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
}
recalc()
win.addEventListener(resizeEvt, recalc, false)
})(document, window)
2. postcss-pxtorem插件
postcss-pxtorem是一款postcss的插件，可以自动将px单位转换成rem单位。我们只需要在项目中使用postcss-pxtorem插件，并设置相应的rem基准值即可。示例代码如下：
/* 在样式中直接写px */
.box {
width: 100px;
height: 200px;
}
/* 经过postcss-pxtorem插件编译后自动转换成rem */
.box {
width: 1.33333333rem;
height: 2.66666667rem;
}
/* 配置postcss-pxtorem插件 */
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75, // 设计稿宽度的1/10
propList: ['*'],
exclude: /node_modules/i
}
}
}
3. lib-flexible库
lib-flexible是一款由阿里巴巴团队开发的移动端rem适配库，可以根据设备的屏幕尺寸动态设置rem基准值，并且支持手淘、支付宝等多个国内知名移动应用。在使用lib-flexible时，我们只需要在页面html中引入flexible.js库即可。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/path/to/flexible.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
总结
通过以上3种rem适配的封装方式，我们可以很方便地实现移动端的适配。其中原生js封装适用于不需要引入插件的简单项目；postcss-pxtorem插件适用于需要使用postcss进行预处理的项目；lib-flexible库适用于对移动端适配有更高需求的项目。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于rem适配的3种常用封装 - Python技术站
微信扫一扫 
支付宝扫一扫 