码前课-前端必修课-html5如何利用rem实现自适应布局

515 05-11

先来简单了解rem是什么：rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
所以我们只要定义好屏幕中根元素的字体大小就可以了。
定义好屏幕中根元素的字体大小，有两种写法：
a.在css中用@media写下规定屏幕宽度范围（或者说设计稿的最多最小宽度）：

@media (min-width:640px){html{font-size:24px;}}
@media (min-width:631px) and (max-width:639px){html{font-size:23.66px;}}
@media (min-width:622px) and (max-width:630px){html{font-size:23.33px;}}
@media (min-width:613px) and (max-width:621px){html{font-size:23px;}}
@media (min-width:604px) and (max-width:612px){html{font-size:22.66px;}}
@media (min-width:595px) and (max-width:603px){html{font-size:22.33px;}}
@media (min-width:586px) and (max-width:594px){html{font-size:22px;}}
@media (min-width:577px) and (max-width:585px){html{font-size:21.66px;}}
@media (min-width:568px) and (max-width:576px){html{font-size:21.33px;}}
@media (min-width:559px) and (max-width:567px){html{font-size:21px;}}
@media (min-width:550px) and (max-width:558px){html{font-size:20.66px;}}
@media (min-width:541px) and (max-width:549px){html{font-size:20.33px;}}
@media (min-width:533px) and (max-width:540px){html{font-size:20px;}}
@media (min-width:524px) and (max-width:532px){html{font-size:19.66px;}}
@media (min-width:515px) and (max-width:523px){html{font-size:19.33px;}}
@media (min-width:506px) and (max-width:514px){html{font-size:19px;}}
@media (min-width:497px) and (max-width:505px){html{font-size:18.66px;}}
@media (min-width:488px) and (max-width:496px){html{font-size:18.33px;}}
@media (min-width:480px) and (max-width:487px){html{font-size:18px;}}
@media (min-width:471px) and (max-width:479px){html{font-size:17.66px;}}
@media (min-width:462px) and (max-width:470px){html{font-size:17.33px;}}
@media (min-width:453px) and (max-width:461px){html{font-size:17px;}}
@media (min-width:444px) and (max-width:452px){html{font-size:17.12px;}}
@media (min-width:435px) and (max-width:443px){html{font-size:16.33px;}}
@media (min-width:426px) and (max-width:434px){html{font-size:16px;}}
@media (min-width:417px) and (max-width:425px){html{font-size:15.66px;}}
@media (min-width:408px) and (max-width:416px){html{font-size:15.33px;}}
@media (min-width:400px) and (max-width:407px){html{font-size:15px;}}
@media (min-width:391px) and (max-width:399px){html{font-size:14.66px;}}
@media (min-width:382px) and (max-width:390px){html{font-size:14.33px;}}
@media (min-width:374px) and (max-width:381px){html{font-size:14px;}}
@media (min-width:365px) and (max-width:373px){html{font-size:13.66px;}}
@media (min-width:356px) and (max-width:364px){html{font-size:13.33px;}}
@media (min-width:347px) and (max-width:355px){html{font-size:13px;}}
@media (min-width:338px) and (max-width:346px){html{font-size:12.66px;}}
@media (min-width:329px) and (max-width:337px){html{font-size:12.44px;}}
@media (max-width:328px){html{font-size:12px;}}

这种方法相对麻烦点。
因为当你看到设计稿的一个元素的宽度要求是100px的时候，你现在需要写成：

div{
  width：100/24rem；
}

这样才能产生自适应的效果，24是屏幕最大时候的取值，即是640px时。当然如果你是用sass写的话会相对简单很多，
先定义一个计算函数，再调用：

$REM=24;
@function REM($n){
    @return $n/$REM*1rem;
}
div{
  width:REM(100)
}

b.另一种就是利用js来控制根元素的font-size:

<script>
    (function(){
        var designW = 750;  //设计稿宽
        var font_rate = 100;
        //适配
        document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
        document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";

        //监测窗口大小变化
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
        document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
                }, false);
            })();
</script>

这种就相对简单点：
因为当你看到设计稿的一个元素的宽度要求是100px的时候，你现在需要写成：

div{
  width：100/100rem；
}

100rem是定死的，不用修改，只有修改一下var designW = 750; //设计稿宽；
如果设计稿是宽是640；var designW = 640；
中的designW的值就可以自适应了。
看看个种分辨率下的效果图吧：

学完还行练？点这里。

标签： HTML5