首页 > 建站教程 > CSS3+HTML5 >  手机端响应式js动态rem尺寸的使用正文

手机端响应式js动态rem尺寸的使用

js rem

    关于rem，我爱模板网有好几篇文章都介绍到了它的使用方法，如 手机端页面自适应解决方案—rem布局进阶版 和 手机端转换rem适应 等，更多你可以查看 rem搜索。今天，在做一个体彩网站时，注意到被模仿的网站也采用了rem，在这里记录下：
    rem是相对于页面根节点（也就是Html节点）的字体大小的页面布局方式。

    1、先将html节点的字体大小设置一下，作用是在重置rem的js代码没有执行完以前，我们有一个自己设置默认的rem使用。我这里设置的默认html根节点字体大小是100px，这样，在js重置rem的代码未执行前不至于变形过度。

    2、编写script代码重置rem，我这儿的代码是使用375px宽度的设计稿为参照对象。如果想自己修改，可以将下面的js中的375大小设计稿对应的宽度，一对一就可以了（比如您的设计稿是1080的宽度，您就改成1080，然后字体宽度等测量出来，除以100就得到了rem的大小了）。现在，在375px宽的屏幕下，1rem代表的就是100px，3.75rem就是整个屏幕宽度了，当屏幕宽度改变时1rem代表的宽度会改变，不过其所占的屏幕比例不会变，也就是3.75rem还是整个屏幕的宽度。下面就是rem的js动态修改代码： 
<!DOCTYPE html>
<html style="font-size:100px">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=320px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<script>
(function(doc, win) {
    var html = doc.getElementsByTagName("html")[0],
    // orientationchange->手机屏幕转屏事件
    // resize->页面大小改变事件(一边pc端有用)
        reEvt = "orientationchange" in win ? "orientationchange" : "resize",
        reFontSize = function() {
            var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
            if(!clientW) {
                return;
            }
            html.style.fontSize = 100 * (clientW / 375) + "px";
    }
    win.addEventListener(reEvt, reFontSize);
    // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
    doc.addEventListener("DOMContentLoaded", reFontSize);
})(document, window);
</script>
</head>
<body>
</body>
</html>
TAGS: js  rem