![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
布局视口:面向开发者，用width表示。
视觉视口：面向设备，与具体设备相关，用device-width表示。
理想视口：理想视口就是开发者开发的内容，在设备显示的时候不用拖动，不用缩小放大，正好可以显示，即width=device-width，是一个逻辑概念。
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，从而控制元素的显示变化，以达到自适应的效果。