目录

长度单位

在日常的项目开发，在使用css样式进行时布局的时候，我们常常用到px、%、em这三个单位。CSS3开始，浏览器新增加了rem、vh、vw、vm等一些新的计量单位。利用这些新的计量单位能够开发出比较好的响应式页面，更大限度适应各种分辨率的终端，包括移动设备、触摸大屏等等。

长度单位众多，讲述px、%、em、rem、vh、vw这几个常用的。

px

px是绝对长度。表示像素，就是在我们显示器上呈现的一个一个的小点，每个像素点的大小都是等同。

可能其他人会把它归为相对长度的行列，因为移动端存在像素比dpr(devicePixelRatio)，devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。可以看下图当dpr为2。即设置1px时在iphone6中显示2px

%

%是相对长度，相对于包含块（containing block）的高宽或字体大小。

关于包含块（containing block）的概念，不能简单地理解成是父元素。

如果是静态定位和相对定位，包含块一般就是其父元素。如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。如果是固定定位的元素，它的包含块是视口（viewport）。

em

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px），此Web页面中的body就继承了这个“font-size:16px;”，除非你在CSS样式中显式的设置body的“font-size”值，来改变其继承的值。例如在body的选择器中设置font-size= 62.5% ，10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了

特点：

em 的值并不是固定的em 会继承父级元素的字体大小em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸任意浏览器的默认字体高都是 16px

rem

rem是相对单位，相对的只是html根元素font-size的值，默认16px = 1rem，想要改变rem的值，只要在html的选择器中设置font-size的值。

html {font-size: 50px}//现在的 1rem = 50px

特点：

rem单位可谓集相对大小和绝对大小的优点于一身和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

在桌面端，指的是浏览器的可视区域

移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

对于普通定位元素就是我们理解的父元素对于position: absolute;的元素是相对于已定位的父元素对于position: fixed;的元素是相对于 ViewPort（可视窗口）

总结

「px」：绝对单位，页面按精确像素展示

「%」：相对单位，相对于包含块（containing block）的高宽或字体大小

「em」：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

「rem」：相对单位，可理解为root em, 相对根节点html的字体大小来计算

「vh、vw」：主要用于页面视口大小布局，在页面布局上更加方便简单