一文读懂CSS单位以及使用

前言

好久没给大家更新文章了。也没什么原因就是比较懒，今天耐着性子要给大家更新一篇关于CSS单位的文章，个人觉得这篇还是比较齐全的。有不足欢迎提出来。

正文

CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

这一篇将从四个方面给大家分析CSS单位的选择

1.绝对长度
2.相对长度
3.浏览器的支持情况
4.实例代码解析

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位看输出介质而定，不依赖于情形（显示器、分辨率、操作系统等）。

单位	描述	源自
cm	厘米	w3school
mm	毫米	w3school
in	英寸 (1in = 96px = 2.54cm)	w3school
px *	像素 (1px = 1/96th of 1in)	w3school
pt	点 (1pt = 1/72 of 1in)	w3school
pc	派卡 (1pc = 12 pt)	w3school

相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位	描述	源自
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）	w3school
ex	相对于当前字体的 x-height(极少使用)	w3school
ch	相对于 "0"（零）的宽度	w3school
rem	相对于根元素的字体大小（font-size）	w3school
vw	相对于视口*宽度的 1%	w3school
vh	相对于视口*高度的 1%	w3school
vmin	相对于视口*较小尺寸的 1％	w3school
vmax	相对于视口*较大尺寸的 1％	w3school
%	相对于父元素	w3school

提示：em 和 rem 单元可用于创建完美的可扩展布局！

浏览器的支持情况

长度单位	铬	IE	火狐	野生动物园	歌剧
全美、ex、%， px， cm， mm， in， pt， pc	1.0	3.0	1.0	1.0	3.5
通道	27.0	9.0	1.0	7.0	20.0
雷姆	4.0	9.0	3.6	4.1	11.6
VH， 大众	20.0	9.0	19.0	6.0	20.0
维明	20.0	9.0*	19.0	6.0	20.0
最大	26.0	不支持	19.0	不支持	20.0

实例代码解析

h1 {
  font-size: 60px;}p {
  font-size: 25px;
  line-height: 50px;}

标红的就是我们要改动的尺寸【根据上面的支持情况来做自适应】