CSS长度单位详解

序言

长度单位能够整体的分为绝对长度单位和相对长度单位。CSS中最为你们熟知的无疑是px和em，但与此同时还存在pt, rem, vw, vh等其余计量单位，使用好它们能够大大增加咱们的开发效率。本篇文章试图整理在前端开发中用到的CSS单位和其应用场景。

px——像素

px是pixel缩写，是基于像素的单位。在浏览网页过程当中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。因此若是在定义字体大小时，使用px做为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（天然长度单位），甚至会看不清，影响浏览。

pt——磅

pt就是point，是印刷行业经常使用单位，等于1/72英寸。pt全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸，是一个绝对长度单位。

em——相对父元素

em单位是指其正在使用的字体大小。在一个页面上给定一个父元素的字体大小,这样就能够经过调整一个元素来成比例的改变全部元素大小.它能够自由缩放,好比用来制做可伸缩的样式表。

此处有一个关于【继承】的点须要注意：使用em设定宽高行高等属性的元素，其子元素继承的并非em，而是其计算以后的值，这一点与使用百分号相同。而不添加单位，其子元素则继承的是百分比，子元素会根据其自身的字号计算得出对应属性值。具体看下面例子：

<div style="line-height:1.5em;font-size:16px;background-color:yellow;">父元素内容 <div style="font-size:40px;background-color:red"> Web前端开发 </div>
</div>

 当使用em时，最外层父元素的行高是1.5*16px=24px，同时其子元素继承了该line-height，效果图以下：

能够看出因为40px>24px，因此字体“溢出”了。而当不添加单位时：

<div style="line-height:1.5;font-size:16px;background-color:yellow;">父元素内容 <div style="font-size:40px;background-color:red"> Web前端开发 </div>
</div>

效果以下：

其行高会跟随自身字号进行计算，继承的只是“比例"。

rem——相对根元素

rem是指根元素（root element）的字体大小，它会随着父元素的字体大小变化而变化，减小了父子元素之间字体大小计算的复杂程度。因为根源素的默认字体大小是16px，为了方便计算，咱们能够进行以下设置：

html{ font-size: 62.5%;      /*10÷16*/
} h1{ line-height: 24px; line-height: 2.4rem;
}

 
IE9+ 和现代浏览器都已经支持了。

rem很是适合作web app的开发，其在web app中的具体应用请参见：

web app变革之rem

萌の宇 – mobile H5布局大全-rem flexbox详解

Flexbox——快速布局神器_flexbox, CSS3, layout 教程_w3cplus

 

vw和vh——相对浏览器窗口

vh等于viewport高度的1/100。例如，若是浏览器的高是900px,1vh求得的值为9px。同理，若是显示窗口宽度为750px,1vw求得的值为7.5px。当咱们想设置跟随视口变化的字体，或是填满整个屏幕的div时，这个单位是很是有用的。

IE10＋ 和现代浏览器都支持这两个单位。

vmin 和 vmax

vh和vm老是与视口的高度和宽度有关，与之不一样的，vmin和vmax是与此次宽度和高度的最大值或最小值有关，取决于哪一个更大和更小。例如，若是浏览器设置为1100px宽、700px高，1vmin会是7px，1vmax为11px。然而，若是宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

IE10+ 和现代浏览器都已经支持vmin，webkit浏览器以前不支持vmax，如今已经支持，全部现代浏览器已经支持，可是IE所有不支持vmax。

ex 和 ch

ex和ch的单位长度，依赖于特殊字符：

• ch 字符0的宽度
• ex 小写字符x的高度

当font-family改变的时候这两个单位的值也会变化，不一样字体表现的样式不同。IE9+ 和现代浏览器都已经支持。

 

参考：7 CSS Units You Might Not Know About

　　　你可能没注意到的CSS单位