关于css中的长度单位px rm rem % vh vw

之前对这一块比较模糊，学习了解之后说说我自己的理解

px

1px表示屏幕上一个像素的大小，他的长度是绝对的。这是最传统的长度表示方法，用px表示长度的好处就是准确而直接。但是由于现在屏幕的尺寸越来越多，各种尺寸差别很大，使用px表示长度很难获得统一的视觉效果，在排版上也经常需要去肉眼估，一些宽度需要一个px一个px的调，当然对于有经验的前端来说，这都不是问题吧。

em

em这个单位稍微有点绕，1em的大小等于当前元素上font-size的大小。他的长度是相对的。在body上默认的font-size是16px，而子元素默认继承父元素的font-size。也就是说在整个页面都没有规定font-size时，在全局1em = 16px。

有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。 

这里需要注意的是当你在不同的地方设定了不同的font-size的话1em的值也会变得不同，尤其是font-size属性会从父元素继承，当你用em来设置font-size的值得时候，还需要考虑父元素font-size的大小

以下这种情况在html上font-size为10px，div内font-size首先从父元素继承10px 然后再*1.2=12px，于是在div内的当前元素的其他地方如设置宽度高度时1em=12px，同理在p里面font-size为12px*1.2=14.4px，于是在div内的当前元素的其他地方设置长度时1em=14.4px

    

        
 你猜我字体是多大？
    

由于em这个单位跟字体是挂钩的，所以当我们在文字排版方面用em就会比较方便，比如说菜单啊表格之类，比如当我们知道一列表格最长显示4个字，那么我们就可以把宽度设置为4em。此外只要改变字体的大小就能很轻易的调整所有元素的大小

http://pxtoem.com/这里可以在线转换em，和px值

 

rem

理解了em之后，rem就简单多了，rem表示相当于根元素的em值，它避免像上面例子那样字体大小逐层复合的连锁反应导致长度计算的复杂性。确定了body的font-size值之后，rem 可以当做绝对长度一样使用。在不规定body的font-size的默认情况，1rem=16px。目前除IE8及更早版本外，所有浏览器均已支持rem。

 

%

%也是一个相对长度单位，100%等于父元素的宽度或高度（不包括padding）。对于当前元素的宽度、左右 100%等于父元素的宽度，而对于高度、上下100%等于父元素的高度

 

vm、vh

vw、vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，1vw等于视窗宽度的1%，而1vh等于视窗高度的1%

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

 

vmin、vmax

vmin表示当前 vw 和 vh 中较小的一个值 vmax表示当前 vw 和 vh 中较大的一个值

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

 

其他

单位	描述
in	英寸
cm	厘米
mm	毫米
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)

他们都是绝对长度单位有以下关系：

• 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px