CSS相关之响应式

一、绝对长度单位

px

特点：不会随着可视页面大小的变化而变化

二、相对长度单位

1.em: 这个长度单位不常用

继承父元素的font-size，其他不继承；如果父元素未设置就继承html的font-size

2.rem：相对于HTML根元素的字体大小来计算长度的单位（用的比较多），浏览器默认设置字体大小为16px，一般设置

html {
    font-size: 62.5%
}

16*0.625 = 10px = 1rem（根元素）便于计算

如果子元素相设置font-size: 16px;就可以这样设置font-size: 1.6rem；

有搭配Media Query一起用的适配手机屏幕

这种方案阶梯型不大友好，无法精准控制每个屏幕宽度阶梯的px，可以在script中写函数进行DOM操作以750为标识设置根HTML的font-size

3.vw和vh

• vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；

• vh：表示视口的高度，1vh就表示当前视口高度的百分之一；

• vmin：表示在vw与vh中取最小值；

• vmax：表示在vw与vh中取最大值。

特点：响应式布局，会随着屏幕大小的变化而变化大小