文章目录
一、rem是什么
rem(font size of the root element)
是指相对于根元素html
的字体大小的单位。
例如: 如果html的
font-size
是16px
那么1rem = 16px
二、应用场景
多应用于
移动端H5
的适配(不同机型不同设备宽度)
三、如何进行rem适配
3.1、添加meta应对移动端适配
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta标签进行移动端适配(让html的宽度正好等于设备的宽度) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>移动端适配</title>
</head>
3.2、动态获取当前设备宽度
<body>
<script>
// 定义一个函数获取当前设备的宽度
function getWinSize() {
let width = document.documentElement.clientWidth;
console.log(width);
}
//进入页面默认获取一次
getWinSize();
//当页面窗口视图改变的时候再次执行,获取设备宽度
window.onresize = getWinSize;
</script>
</body>
3.3、根据设备宽度,设置html的font-size
- 假设设计稿宽度是
750px
,我们获取到的设备宽度为clientWidth
- 那么有等式一:
750px = clientWidth
- 那么有等式二:
1px = clientWidth/750
- 假设我们想实现
1rem = 100px
(方便计算,也可以是其他比例)- 也就是需要设置
html
的font-size
为100px
- 根据等式二,得出
1rem = 100px = 100*(clientWidth/750)
最后给
html
的根元素设置字体大小值就为100*(clientWidth/750)
注意
- 这里的
1rem = 100px
,好处是:- 只需要根据设计稿给的
px
直接缩小100
倍,改单位为rem
即可
<script>
// 定义一个函数获取当前设备的宽度
function getWinSize() {
let width = document.documentElement.clientWidth;
// 假设设计稿宽度为750px
// 假设已知根元素我们设置为100px(这里设置100方便后续我们好计算)
// 动态设置根元素html的fontSize
document.documentElement.style.fontSize =
100 * (width / 750) + "px";
}
//进入页面默认获取一次
getWinSize();
//当页面窗口视图改变的时候再次执行
window.onresize = getWinSize;
</script>
3.4、如何使用?
如果设计稿给我们一个盒子
宽是 350px 高是 400px
,那么我们只要在数值的基础上缩小100倍
即可,宽是3.5rem高是 4rem
四、PC端处理
当我们做的移动端适配以后,这个网页仍然有可能在PC端
打开,这时候我们就需要对body
元素设置最大宽度和居中,来适配pc端
body {
/* 750根据设计稿宽度设计 */
max-width: 750px;
/* 居中 */
margin: 0 auto;
}
五、封装一个phone.js文件
代码如下
(function (doc, win) {
var docEL = document.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
// 获取当前设备的宽度
var clientWidth = docEL.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
//宽度大于750,根元素字体大小不能超过100px(不能大于设计稿的最大宽度)
docEL.style.fontSize = "100px"; //设置根元素大小
} else {
docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
}
};
if (!doc.addEventListener) return;
//添加窗口变动监听
win.addEventListener(resizeEvt, recalc, false);
//dom加载的时候执行一次
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
引入
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta标签进行移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./phone.js"></script>