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

前言

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

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

html 复制代码

<!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;

html 复制代码

<!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>

效果图：

三.rem【重要】

3.1rem介绍

rem 是CSS3 新增的一个相对单位，rem 是相对于HTML根元素的**字体大小(font-size)**来计算的长度单位

如果没有设置html 的字体大小 ，那么就会以浏览器默认字体大小 (一般是16px)

优点：

只需要设置根目录字体的大小就可以把整个页面的比例调好，因此"rem"多用于响应式布局

3.2rem与em的区别

rem是相对于根元素(html)的字体大小，而em是相对于其父元素的字体大小

两者使用规则：

如果这个属性根据它的font-size进行测量，则使用em
其它的一切事物属性均使用rem

四.vw、vh、vmax、vmin

vw、vh、vmax、vmin 这四个单位都是基于视口

vw是相对于视口的宽度而定的，1vw相当于视口宽度的1/100
vh是相对于视口的高度而定的，1vh相当于视口高度的1/100
vmax是相对于视口高度和宽度(window.innerWidth和window.innerHeight)中的最大值
vmin是相对于视口高度和宽度(window.innerWidth和window.innerHeight)中的最小值

五.注意问题

5.1如何使1rem = 10px？

给html标签添加font-size为"62.5%"即可：

css 复制代码

html {
    font-size:62.5%;
}

5.2如果父元素没有指定高度，那么子元素的百分比高度是多少？

会按照子元素的实际高度，设置百分比没有效果

5.3更多问题

如果后面有更多常见问题，作者将会在这里实时更新，欢迎读者朋友们关注！