前言
大家好，我是咋还不学习，今天聊一下CSS中px、em、rem、vh、vw这些单位都有什么区别，什么时候该用什么单位，如何正确使用。
首先，在我们日常中的传统开发中，px作为一等公民，成为了我们使用最多的单位，其次是%以及em等单位，正常情况下，px可以适用于大部分项目的开发，并且，具有良好的兼容性，但是从CSS3开始，浏览器对这些计量单位的支持又提升到了一个新的高度，陆续推出了rem、vh、vw以及vm等一些新的计量单位，利用这些单位，友好的帮助我们解决了开发响应式页面的问题，使得我们开发出来的页面可以适配不同分辨率的设备。真香！
计量单位
在CSS的计量单位体系中，可以分为相对长度单位和绝对长度单位：
- 相对长度单位包括：
em、ex、ch、rem、vw、vh、vmin、vmax、% - 绝对长度单位包括：
cm、mm、in、px、pt、pt、pc
px
即像素，由计算机基础或者设计基础的同学应该都比较了解，像素其实就是对应我们显示器上的一个个同等大小的点，因此，像素在计量单位体系中，属于绝对长度单位，之前看到过网上的一些争论关于px是否为绝对长度单位，我认为是属于绝对长度单位，因为即使在移动端中存在设备像素比，px实际大小不确定，但是从主观的角度出发，px的大小和元素与其他的属性无关。
特点：
- 兼容性好
- 使用方便
em
em属于相对长度单位。相对对象为当前对象内文本的字体size，如果当前行内文本的字体尺寸未设置，则相对对象为浏览器的默认字体尺寸1em = 16px。
一般情况下，为了简化font-size的换算，我们需要在css中的body选择器中声明font-size=62.5%，使得em值变为16px*62.5% = 10px，这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位即可。
特点：
- em 的值不固定
- em 会继承父级元素的字体尺寸
- em 是相对长度单位，相对当前行内对象的文本尺寸，如未设置，相对浏览器的默认字体尺寸
举个
<!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>
<style>
html {
font-size: 10px; /* 公式16px*62.5%=10px */
}
.outside {
font-size: 1.4rem
}
.innerside{
font-size: 1.2rem
}
</style>
</head>
<body>
<div class="outside">
我是14px=14.rem
<div class="innerside">我是12px=1.2rem</div>
</div>
</body>
</html>
此时，.outside的font-size为14px，而.innerside的font-size为16px，可以从图中明显看出来差异。
rem
rem是相对单位，与em不同的是，相对对象只是html根元素的font-size，与em同理，可以在根元素中写入font-size: 62.5%，来简化转化。
html {
font-size: 62.%; /* 公式16px*62.5%=10px */
}
这样，在我们的页面中1rem = 10px、1.2rem = 12px，以此类推。
特点：
- rem单位有px & em 两者的优点
vh、vw
vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
这里的窗口分成几种情况：
- 在桌面端，指的是浏览器的可视区域
- 移动端指的就是布局视口
像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：
- 对于普通定位元素就是我们理解的父元素
- 对于position: absolute;的元素是相对于已定位的父元素
- 对于position: fixed;的元素是相对于 ViewPort（可视窗口）
总结
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
