在談到rem時(shí)大家可能都會(huì)想到em px等用于設(shè)置頁(yè)面元素的單位已艰，但就rem來(lái)說(shuō)它有em和px不可達(dá)的優(yōu)點(diǎn)祟滴。rem中第一個(gè)單詞代表root刊懈，而它的root就是html元素，也就是說(shuō)它的大小是相對(duì)于html元素的font-size大小進(jìn)行相應(yīng)的變化的捷凄。
em是相對(duì)與父元素的font-size大小而進(jìn)行變化的忱详，可以想象當(dāng)我們應(yīng)用太多的時(shí)候，必定會(huì)帶來(lái)混亂纵势，到最后也難以設(shè)置字體大小踱阿，rem就是用于解決這個(gè)問(wèn)題管钳。但是rem可不僅僅用于設(shè)置字體大小钦铁，它在移動(dòng)端的頁(yè)面自適應(yīng)也不失為一種不錯(cuò)的方案。
先上一段代碼解釋下rem的自適應(yīng)方案才漆。
<!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">
我可以自適應(yīng)屏幕大小
</div>
</body>
</html>
這段代碼大家可以復(fù)制在本地運(yùn)行查看效果牛曹。代碼雖然很短，但也有一些需要揣摩的點(diǎn)
const remUnit = 37.5;
這里的37.5是以常作為設(shè)計(jì)模版的iphone6寬度除10得來(lái)的醇滥，為的是設(shè)定一個(gè)基本的標(biāo)準(zhǔn)(375px下font-size值為14px)let width = document.documentElement.getBoundingClientRect().width;
getBoundingClientRect()這個(gè)方法常用于獲取頁(yè)面實(shí)際可用于布局的寬度黎比，它有六個(gè)值，但這里我們只用到widthdiv.style.fontSize = parseFloat((width / 10 * rem).toFixed(6)) + 'px';
用于將最終在當(dāng)前屏幕寬度下的字體大小插入內(nèi)聯(lián)的style樣式在實(shí)際操作時(shí)鸳玩，大家可能發(fā)現(xiàn)在屏幕寬度小于320px(iphone5)阅虫，字體始終會(huì)以12px顯示，盡管內(nèi)聯(lián)樣式中font-size值小于12px不跟，其實(shí)這是因?yàn)闉g覽器最小可以渲染的字體大小就是12px
window.getComputedStyle颓帝，實(shí)際應(yīng)用下來(lái)發(fā)現(xiàn)這個(gè)方法真的很實(shí)用，雖然在代碼中沒(méi)有使用，方法用于得到在屏幕中實(shí)際顯示元素的大小购城，避免了上述那種實(shí)際顯示大小和代碼大小不同的情況
onresize方法是自帶的用于監(jiān)聽(tīng)屏幕放大縮小
上面只是項(xiàng)目實(shí)際應(yīng)用中很小一部分吕座，記錄下來(lái)方便下次查看。
