CSS单位之间的关系 - javascript技术分享

像素 (px) 是一种绝对单位（absolute units），因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位如下： mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches） pt, pc: 点（Points (1/72 of an inch)），十二点活字（ picas (12 points.)）除了px之外，你很可能都不怎么使用其他的单位。也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸。 em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。 ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。 rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持（查看关于跨浏览器支持 Debugging CSS.) vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。使用相对单位是非常有用的-你可以相对于你的字体或视口大小来调整HTML元素的大小，这意味着，假设整个网站上的文本大小被视力障碍用户调整为原来的两倍，而网站的布局仍将保持正确。动画的数值 CSS动画能够让页面上的HTML元素动起来。我们来看一个例子，当我们把鼠标浮动到一个段落上的时候，它能够旋转起来。这个例子的HTML代码很简单：

Hello

CSS有点复杂： @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } p { color: red; width: 100px; font-size: 40px; transform-origin: center; } p:hover { animation-name: rotate; animation-duration: 0.6s; animation-timing-function: linear; animation-iteration-count: 5; } 你能看到一些之前没有明确提到的有趣单位 (s、 s、 s、 s...)，但是我们感兴趣的是这一行 animation-iteration-count: 5; ——此行控制着动画启动（这里是指光标浮动至段落上时）后会执行多少次，而且这是一个简单的，无单位，纯数字（计算机中称之为整型）。最常用的 px 像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的 px 可谓是 css 中最常用的长度单位，但是仍有许多人不理解 px 是什么，感觉 px 不就是一个小点嘛。要明白 px 就要搞清楚像素、分辨率和像素密度的问题。像素（Pixel）是数字图像的最小组成单元，它不是一个物理尺寸，但和物理尺寸存在一个可变的换算关系（物理尺寸之间的换算是固定的）。像素分为设备像素（device pixels）和 css像素（css pixels），其中存在着转换关系。要搞明白他的转换关系，就要搞明白什么是 dpi、ppi。对手机比较熟悉的同学可能对这两个东西比较了解。dpi 和 ppi 其实都是表示屏幕像素密度，ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。