一、三大视口介绍和换算关系

布局视口:面向开发者，用width表示。
视觉视口：面向设备，与具体设备相关，用device-width表示。
理想视口：理想视口就是开发者开发的内容，在设备显示的时候不用拖动，不用缩小放大，正好可以显示，即width=device-width，是一个逻辑概念。

二、rem+vw布局原理和流程

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="title">Hello World</div>
</body>
</html>

CSS代码（test.css）

html{
    /* vw 视口宽度，随设备大小改变而改变，正好可以用来反应device-width */
    /* rem作为影响整个html的根参考值，应为一个变量，这样可以做到，设备大小改变，rem也有所改变，从而改变所有html元素大小的作用，方便进行布局。 */
    /* 假设初始rem大小设为100px，即1rem = 100px */
    font-size: 100px; 
    /* 如果我们把375的设备屏的1rem设为100px，那么其他设备上1rem的大小应该对应有所变化，即1rem应该大于或者小于100px来调整显示以自适应。 */
}
body{
    /* 当body字体大小为16px时，他相当于是0.16倍的rem，也就是说当rem为100像素时，body的字体为16像素。 */
    font-size: 16px;
}
/* 我们演示通过改变rem进而改变其他元素大小的效果 */
/* 当屏幕小于375px时，如果想把body字号变成14px，不再缩小，那么需要计算下rem的改变 */
@media (max-width :375px){
    /* 如果body字体从16px变到14px，是缩小了0.875倍，如果rem为100px，rem缩小0.875倍就是100px*0.875=87.5px。 */
    html{
        font-size: 87.5px;
    }
}
/* 当屏幕成375px增大到大于470px时，如果想把body字号变成20px，之后不再变化，计算如下。*/
@media (min-width :470px){
    /* 16px变到20px，是1.25倍，100px的1.25倍是125px。 */
    html{
        font-size: 125px;
    }
}

以上通过vw的大小改变，来模拟改变rem，从而控制元素的显示变化，以达到自适应的效果。

rem+vw的布局原理和流程

一、三大视口介绍和换算关系

二、rem+vw布局原理和流程

相关文章