浅谈使用rem实现页面自适应布局

2017-08-04  本文已影响0人  DouQing

在谈到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>

这段代码大家可以复制在本地运行查看效果。代码虽然很短,但也有一些需要揣摩的点

上一篇 下一篇

猜你喜欢

热点阅读