html5如何利用rem实现自适应布局

缺乏、安全感 2022-06-06 06:25 414阅读 0赞

先来简单了解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:

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

div{ width：100/100rem； }

100rem是定死的，不用修改，只有修改一下var designW = 750; //设计稿宽；  
如果设计稿是宽是640；var designW = 640；  
中的designW的值就可以自适应了。  
看看个种分辨率下的效果图吧：  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220606/c4cedf323ad4488082aaefebb635c494.png
[SouthEast 1]: /images/20220606/2f32ff8c126c4c28aa5833ddc68a0d26.png
[SouthEast 2]: /images/20220606/ff5455d8f7764cee8841e6db7d6cf009.png
[SouthEast 3]: /images/20220606/80252500b81a4434ba95a88365bfbcd3.png