CSS 单位参考 - 蝴蝶教程

CSS单位

CSS有几个不同的单位来表示长度。许多CSS属性采用“长度”值，例如宽度，边距，填充，字体大小，边框宽度等。长度是一个数字，后跟长度单位，例如10px，2em等。数字和单位之间不能出现空格。但是，如果该值为0，则可以省略该单位。对于某些CSS属性，允许使用负长度。有两种类型的长度单位：绝对和相对。

绝对长度单位是固定的，以这些中的任何一个表示的长度将显示为该大小。建议不要在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果输出介质已知，则可以使用它们，例如用于打印布局。

*像素（px）相对于观看设备。对于低dpi设备，1px是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px意味着多个设备像素。

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

单位	描述
em	相对于元素的字体大小（2em意味着当前字体大小的2倍）尝试一下
ex	相对于当前字体的x高度（很少使用）尝试一下
ch	相对于“0”的宽度（零）尝试一下
rem	相对于根元素的font-size 尝试一下
vw	相对于视口宽度的1％* 尝试一下
vh	相对于视口高度的1％* 尝试一下
vmin	相对于视口的*较小尺寸的1％尝试一下
vmax	相对于视口的1％*更大的维度尝试一下
%	相对于父元素尝试一下

提示： em和rem单元在创建完美可扩展的布局方面非常实用！ * Viewport =浏览器窗口大小。如果视口宽50厘米，1vw = 0.5厘米。

单位	Edge/IE	Chrome	FireFox	Safari	Opera
单位表示
em, ex, %, px, cm, mm, in, pt, pc	3.0（含）以上	1.0（含）以上	1.0（含）以上	1.0（含）以上	3.5（含）以上
ch	9.0（含）以上	27.0（含）以上	1.0（含）以上	7.0（含）以上	20.0（含）以上
rem	9.0（含）以上	4.0（含）以上	3.6（含）以上	4.1（含）以上	11.6（含）以上
vh, vw	9.0（含）以上	20.0（含）以上	19.0（含）以上	6.0（含）以上	20.0（含）以上
vmin	9.0（含）以上	20.0（含）以上	19.0（含）以上	6.0（含）以上	20.0（含）以上
vmin	不支持	26.0（含）以上	19.0（含）以上	7.0（含）以上	20.0（含）以上

注意： Internet Explorer 9支持使用非标准名称的vmin：vm。