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 倍。
代码：

<style>
.div{font-size:20px;}
.p{font-size:2em;}
.span{font-size:0.5em;}
style>

<div class="div">div 标签中的文字大小为 20px
<p class="p">P 标签中的文字大小为 2em
<span class="span">span标签中的文字大小为0.5emspan>
p>
div>

效果：

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

2、rem

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

<style>
html{font-size:16px;}
.div{font-size:30px;background-color:pink;padding:50px;}
.p{font-size:1rem;}
.span{font-size:0.5rem;}
style>

<div class="div">div 标签中的文字大小为 30px
<p class="p">P 标签中的文字大小为 1rem
<span class="span">span 标 签 中 的 文 字 大 小 为
0.5remspan>
p>
div>

效果：

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

3、vw 和 vh

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

<style>
body{background-color:orange;}
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
style>

<p class="p">P 标签的宽度为 50vwp>

效果：

说明：
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。

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

.box { 
    height: 100vmin; 
    width: 100vmin;
}

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

.box { 
height: 100vmax; 
width: 100vmax;
}