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

向右看齐 2021-06-26 16:06 602阅读 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`的值就可以自适应了。  
看看个种分辨率下的效果图吧：