CSS单位px、rem、em、vw、vh的区别

news2024/11/17 21:39:29

前言

这几天在写个人网站，因为要适配移动端和桌面端，因此了解到了一个新的布局：“响应式布局”(后面有时间会单独讲一下这个布局)，现在我们来讨论一下CSS3中的单位，只有掌握好了这些单位，我们才可以熟练使用“响应式布局”

为方便沟通，给出一个示例代码，后续关于单位的讨论都是基于示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单位区别</title>
		<style>
			div {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body style="display: flex;">
		<div style="background-color: aqua;"></div>
		<div style="background-color: red"></div>
		<div style="background-color: black;"></div>
	</body>
</html>

效果图：

后续我们将使用“不同的单位修改<div>盒子的宽度”来展示效果

零.视口介绍

在学习单位之前，我们需要先了解什么是“视口”

视口是用户在网页上的可见区域
视口随设备而已，一般移动端的视口会比桌面端视口更小
视口是可见区域，不包括浏览器的UI、菜单栏等，即你正在浏览的文档的那一部分
视口的大小是可变的，就比如在桌面端通过缩放/扩大窗口来修改视口大小

下面介绍三个属性用来查询视口大小：

window.innerWidth、window.innerHeight：用CSS像素单位表示的浏览器窗口的视口宽度\高度，包括垂直\水平滚动条
window.outerWidth、window.outerHeight：包括了浏览器外边框的窗口宽度\长度
element.clientWidth、element.clientWidth：对于内联元素或者没有CSS样式的元素为0，否则它是元素内部的宽度\长度(以像素为单位)，该属性包括：“内边距”、“外边框”、“垂直滚动条”，不包括“边框”

注意：

在实测中，innerWidth和outerWidth是相同的，但是outerHeight比innerHeight高100px，这是因为outerHieght的测量包括浏览器框架在内(地址栏和书签栏)，而浏览器没有左右边框

一.px

px是“pixel”像素的缩写，相对长度单位，是接触HTML第一个学到的单位，也是网页设计的基本单位，像素px是“相对于显示器屏幕分辨率而言的”

因此，使用像素px设置布局最大的问题就是：“在2.5k分辨率的屏幕上开发的界面，换到1K的屏幕上可能就会变得拥挤且杂乱”

用我们上面的例子，三个<div>盒子的宽度都是100px，此时将页面“缩小\放大”，可以发现<div>盒子的大小是固定的

(哪怕将网页缩小到这样了，大小也不会改变)

二.em

em是相对长度单位，相对于当前对象内文本的字体尺寸(参考物是父元素的font-size)

(如果父元素的字体尺寸没有设置，则相对于浏览器的默认字体尺寸)

特点：

em的值不是固定的
em会继承父级元素的字体大小

1em = 父元素的font-size大小

2em = 父元素的font-size大小 * 2

以此类推

例如下面的代码，我们指定html的“font-size”大小为20px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单位区别</title>
		<style>
			html {
				font-size: 20px;
			}
			div {
				width: 1.5em;
				height: 100px;
			}
		</style>
	</head>
	<body style="display: flex;">
		<div style="background-color: aqua;"></div>
		<div style="background-color: red"></div>
		<div style="background-color: black;"></div>
	</body>
</html>

效果图：