UI设计CSS网页基本单位知多少?奇酷学院告诉你

想要成为一名合格的前端工程师，会写页面绝对不能少，而如果想要页面写得出彩，你必须要知道一些网页常用的基本单位。

在传统的项目开发中，我们常常会用到px、%、em这几个单位，因为它能适用于大部分的项目开发，而且拥有比较良好的兼容性。但素，你造吗？从CSS3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vw、vh、vm等一些新的长度单位，我们可以用这些新的单位开发出比较良好的响应式页面，以此可以覆盖多种不同分辨率的设备，包括移动设备等。

那么，接下来我们分别来分析下，这些常用到的单位分别是什么。

1．px

px就是pixel的缩写，像素，相对长度单位，像素是相对于显示器屏幕分辨率而言。比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。再比如，px就可以认为是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的。

2.em

相对长度单位，参考对象是父元素的font-size，具有继承的特点，如果当前行内文本的字体尺寸未被设置，浏览器使用默认字体尺寸（16px），整个页面内1em也不是一个固定的值。

3.%

一般宽泛的讲是相对于父元素，但是并不是绝对的。

1）、对于普通元素就是我们理解的相对于父元素

2）、对于position: absolute;的元素是相对于已定位的父元素

3）、对于position: fixed;的元素是相对于ViewPort（可视窗口）

4.rem

rem是css3的新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

例如：

p{font-size:14px;?font-size:.875rem;}

但是，需要注意的是：

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。一般rem用在移动端可能更多些。

5.vw

vw是css3新单位，viewpoint width的缩写，即视口宽度。何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。视口宽度被均分为100单位的vw，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

6.vh

与vw类似，vh就是可视窗口的高度了。视口高度被均分为100单位的vh，1vh就是高度的1%。看下图：

7.vm

vm也是css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。

举个栗子：浏览器高度800px，宽度1000px，取最小的浏览器高度，1 vm = 800px/100 = 8 px。

由于现在vm的兼容性较差，现在基本上很少有人用。

除了上述7种单位，css还有哪些长度单位？

例如：

in 寸

cm 厘米

mm 毫米

pt point磅，大约1/72寸

pc pica派卡，大约6pt，1/6寸

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