rem布局

rem布局进行的是元素等比例缩放

em：相对于当前元素的字体大小 → 1em = 当前标签的font-size

rem：相对于根元素（html）的字体大小 → 1rem = html标签的font-size

浏览器默认的font-size的大小为16px

rem布局原理

屏幕尺寸改变时，通过改变html标签的font-size使元素自适应

怎么使用rem布局

• 媒体查询
• flexible.js

媒体查询

1.根据设计图尺寸，把px单位转换成rem单位

px值 = rem单位 * html标签的font-size

• rem = px / html标签的font-size
• 为了计算方便，一般我们会针对于设计图的大小自定义一个html标签的font-size的大小

确定比例

比如设计图宽度为375px，确定比例为1:10，则html的font-size设置为37.5px

2.利用媒体查询，当屏幕尺寸变化时，更改html标签的font-size

@media screen and (min-width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media screen and (min-width:750px) {
    html {
        font-size: 75px;
    }
}

/* ...... */ 

注意点：为了保证大屏的媒体查询不被覆盖，媒体查询一般从小屏往大了写。

flexible.js

直接引入flexible.js文件即可

比例：屏幕宽度 / html的font-size = 10

rem = px / html的font-size