在谈到rem时大家可能都会想到em px等用于设置页面元素的单位，但就rem来说它有em和px不可达的优点。rem中第一个单词代表root，而它的root就是html元素，也就是说它的大小是相对于html元素的font-size大小进行相应的变化的。
em是相对与父元素的font-size大小而进行变化的，可以想象当我们应用太多的时候，必定会带来混乱，到最后也难以设置字体大小，rem就是用于解决这个问题。但是rem可不仅仅用于设置字体大小，它在移动端的页面自适应也不失为一种不错的方案。
先上一段代码解释下rem的自适应方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Title</title>
</head>
<style>
</style>
<script>
window.onload = function () {
const remUnit = 37.5;
let div = document.getElementsByClassName("content")[0];
let rem = 14 / remUnit;
let width = document.documentElement.getBoundingClientRect().width;
div.style.fontSize = parseFloat((width / 10 * rem).toFixed(6)) + 'px';
};
</script>
<body onresize="onload()">
<div class="content" style="font-size: 14px">
我可以自适应屏幕大小
</div>
</body>
</html>
这段代码大家可以复制在本地运行查看效果。代码虽然很短，但也有一些需要揣摩的点
-
const remUnit = 37.5;
这里的37.5是以常作为设计模版的iphone6宽度除10得来的，为的是设定一个基本的标准(375px下font-size值为14px) -
let width = document.documentElement.getBoundingClientRect().width;
getBoundingClientRect()这个方法常用于获取页面实际可用于布局的宽度，它有六个值，但这里我们只用到width -
div.style.fontSize = parseFloat((width / 10 * rem).toFixed(6)) + 'px';
用于将最终在当前屏幕宽度下的字体大小插入内联的style样式 -
在实际操作时，大家可能发现在屏幕宽度小于320px(iphone5)，字体始终会以12px显示，尽管内联样式中font-size值小于12px，其实这是因为浏览器最小可以渲染的字体大小就是12px
-
window.getComputedStyle，实际应用下来发现这个方法真的很实用，虽然在代码中没有使用，方法用于得到在屏幕中实际显示元素的大小，避免了上述那种实际显示大小和代码大小不同的情况
-
onresize方法是自带的用于监听屏幕放大缩小
-
上面只是项目实际应用中很小一部分，记录下来方便下次查看。
网友评论