适配方案rem和vw/vh

适配方案 rem和vw/vh

移动端的适配方案：

1. flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多
2. flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

rem适配

rem单位

rem 是一个相对单位，相对于html的字号大小,1rem 就是 html 文字的大小

比如

html {
    font-size: 35px;
}

媒体查询

媒体查询 mediaquery 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ，就完成了适配

语法：

@media (width:375px) {
    html {
        font-size: 40px;
    }
}

@media (width:320px) {
    html {
        font-size: 30px;
    }
}