rem布局

em单位：根据父元素的font-size设置大小
rem：根据html元素的font-size设置大小 默认html16px
rem+媒体查询

@media screen and （min-width：320px）{
    html{
        font-size:100px;
    }
}

怎么使用rem

1. 根据标准稿件来定义html的font-size属性
2. .划等分
3. 适配不同的设备

要怎么理解这个过程

以下模拟一下

1. 假设拿到了一张设计稿 750px

2. 我想将它划分为 10 等分 那么 1rem = 750px/10=75px;

3. 接下来我需要适配不同的屏幕 可以采用到媒体查询
   假设设备现在的宽度为375px 那么它的html的font-size就应该是 375px/10 =37.5px

   元素在这些设备上的大小怎么变化呢

假设一个7575的div 在750px屏幕下宽高应该设置为 1rem1rem 宽高的比例为1:1
那么现在同样一个盒子到了 375px 的设备中 1rem就是37.5px 那么此时该盒子的宽高就是37.5px*37.5px 宽高比例1:1
这样利用了rem布局 让元素在不同大小的屏幕上 实现了等比例缩放的效果

实际的应用

刚开始只了解到 媒体查询+rem 适配
先利用媒体查询设置常见的设备大小范围 html的font-size

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

链接: https://blog.csdn.net/lvyang251314/article/details/82798858.