CSS度量单位rem、em、vw、vh详解

CSS度量单位rem、em、vw、vh详解

单位 说明 兼容性
em 相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化 良好
rem 相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+
vw 相对于视口的宽度， 视口被均分为 100 单位的vw 高版本浏览器均支持
vh 相对于视口的宽度， 视口被均分为 100 单位的vh 高版本浏览器均支持

1、em

相当于“ 倍” ，比如设置当前的 div 字体大小为 1.5em，则当前的 div 的字
体大小为：当前 div 继承的字体大小*1.5 倍。
代码：

效果：

说明：
单位 em 是随着父元素大小的变化而变化，div 是 p 的父元素，p 是
span 的父元素，所以 p 标签的大小受制于 div 标签，span 标签的大小受制
于 p 标签，不受制于 div 标签。
div 标签的字体大小是 20px，p 标签的大小是 40px，span 标签的字体大小
是 20px

2、rem

这里的 r 是 root 的意思，就是相对于根节点来进行缩放，如果有嵌套的关
系，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放
代码：

效果：

说明:
rem 单位是根据根节点的大小来设置的，也就是根据 html 的大小来
设置的，跟父元素没有关系，所以 p 标签的字体大小是 16px，span 标签的
字体大小是 8px。

3、vw 和 vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于
屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的
话 vh 单位更好。
代码：

效果：

说明：
1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw
就是 10px，vh 同理。
P 标签的宽度是 50vw，所以就是页面宽度的 50%，高度是 50vh，所以就
是页面高度的 50%。

4、vmin 和 vmax

关于视口高度和宽度两者的最小值或者最大值。
比如，浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。

有一个元素，你需要让它始终在屏幕上可见：


如果你要让这个元素始终铺满整个视口的可见区域：

CSS度量单位rem、em、vw、vh详解

单位 说明 兼容性
em 相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化 良好
rem 相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+
vw 相对于视口的宽度， 视口被均分为 100 单位的vw 高版本浏览器均支持
vh 相对于视口的宽度， 视口被均分为 100 单位的vh 高版本浏览器均支持

1、em

相当于“ 倍” ，比如设置当前的 div 字体大小为 1.5em，则当前的 div 的字
体大小为：当前 div 继承的字体大小*1.5 倍。
代码：

效果：

说明：
单位 em 是随着父元素大小的变化而变化，div 是 p 的父元素，p 是
span 的父元素，所以 p 标签的大小受制于 div 标签，span 标签的大小受制
于 p 标签，不受制于 div 标签。
div 标签的字体大小是 20px，p 标签的大小是 40px，span 标签的字体大小
是 20px

2、rem

这里的 r 是 root 的意思，就是相对于根节点来进行缩放，如果有嵌套的关
系，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放
代码：

效果：

说明:
rem 单位是根据根节点的大小来设置的，也就是根据 html 的大小来
设置的，跟父元素没有关系，所以 p 标签的字体大小是 16px，span 标签的
字体大小是 8px。

3、vw 和 vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于
屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的
话 vh 单位更好。
代码：

效果：

说明：
1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw
就是 10px，vh 同理。
P 标签的宽度是 50vw，所以就是页面宽度的 50%，高度是 50vh，所以就
是页面高度的 50%。

4、vmin 和 vmax

关于视口高度和宽度两者的最小值或者最大值。
比如，浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。

有一个元素，你需要让它始终在屏幕上可见：


如果你要让这个元素始终铺满整个视口的可见区域：