本文深入讲解了CSS中px、em、rem、%、vw、vh、vm等单位的区别，包括它们的基本概念、应用场景及计算方式，帮助前端开发者更好地理解和运用这些单位，实现响应式设计。
这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【px、em、rem、%、vw、vh、vm等单位有什么区别？】
px、em、rem、%、vw、vh、vm等单位有什么区别？
大家好，我是IT修真院西安分院第5期的学员许恒倩，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网CSS任务三，深度思考中的知识点——px、em、rem、%、vw、vh、vm等单位有什么区别？
（1）背景介绍：
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，
并且拥有比较良好的兼容性。但是从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，
增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，
随之覆盖多种不同分辨率的终端，包括移动设备等。接下来就讲下这些长度单位有什么区别。
（2）知识剖析：
- PX
px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点
(是你屏幕分辨率的最小分割)。是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等
px是绝对长度单位，它不会根据屏幕的大小进行调整。
2.%
百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小。
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素，它的包含块是视口（viewport）
- EM
em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。
em单位有如下特点：
- em的值并不是固定的;
- em会继承父级元素的字体大小。
em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了。
- REM
rem是CSS3新增的一个相对字体长度单位，只相对根元素即html元素字体大小
所以我们只要在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照
我们知道任意浏览器的默认字体大小都是16px。
为了简化font-size的换算，需要在css中的根元素html中声明font-size=62.5%，这就使rem值变为 16px*62.5%=10px,
这样 10px=1rem, 也就是说只需要将你的原来的px数值除以10，然后换上rem作为单位就行了
- VW 和VH
CSS3新增的长度单位,分别是viewpoint Width和viewpoint Height的缩写。
1vh 等于1/100的视口高度。举个列子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px
- VM
vmin 是当前 vm 和 vh 中较小的一个值，也就是说，是可视区域较小的一边的1/100的长度；
例如：可视区大小为 1000x800, 则 wmin = 800/100 = 8px;
如果可视区大小为 600x800, 则 wmin = 600/100 = 6px;
类似的, vmax 是当前 vm 和 vh 中较大的一个值，也就是说，是可视区域较大的一边的1/100的长度；
例如：可视区大小为 1000x800, 则 wmin = 1000/100 =10px;
如果可视区大小为 600x800, 则 wmin = 800/100 = 8px;
（3）常见问题：
在使用REM为单位时，为何将HTML的FONT-SIZE:625%
（4）解决方案：
大部分现代浏览器默认时16px,chrome强制最小字体为12号，即使设置成 10px 最终都会显示成12px，
当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，
所以提到的将html的font-size设为10方便计算不是那么可取)。导致chrome的em/rem计算不准确。
为了解决这个坑，设置html字体为625%，即100px，body 修正为16px，这样 0.1rem 就是 10px，
而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。
（5）编码实战：
body {
font-size: 20px;
}
.txt {
font-size: 1.5em;
}
.block {
font-size: 1.5em;
}
</style>
<body>
<div class="txt">
我是文字
<div class="block">
我是文字2
</div>
</div>
</body>
（6）拓展思考：
CSS还有哪些长度单位？
英寸in(inches) 1in = 96px
厘米cm(centimeters) 1cm = 37.8px
点pt(points) 1pt = 1.33px
派卡pc(picas) 1pc = 16px
（7）参考文献：
参考：
你可能不了解的七个 CSS 单位
CSS/CSS3长度、时间、频率、角度单位大全--张鑫旭
（8）更多讨论：
Q1：提问人：如果父元素没有指定高度，那么子元素的百分比的高度是多少？
A1：我：会按照子元素的实际高度，设置百分比已经没有效果了。
（9）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
扫一扫
5260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
