css 长度单位知多少

css

写在前面：在这个是个 coder 都会写两行前端代码的年代下，几乎都对 css 不是很陌生，但是真正能写好的确需要对 css 深入学习了，做为一个不称职的后端，我觉得我也有必要多了解一下。

css 中长度单位有哪些？

px、in、cm、mm、q、pt、pc、em、rem、ex、ch、vh、vw、vmin、vmax，最后还有个特殊单位：百分比。

其中基本上可以划分以下为三种

绝对长度单位

px、cm、mm等，px是基于像素的绝对长度单位（说 px 是绝对长度单位其实也不太妥当，因为像素是相对于设备来说的，后面有介绍），cm、mm是物理度量的长度单位。常用px

字体相对长度单位

em、rem、ex 等，常用 em、rem

视窗相对长度单位

vw、vh、vmin等，不太常用

常用单位介绍

css 长度单位十几种，然而受浏览器兼容、开发人员习惯等等原因，常用的也就 px、em、rem等有限的几种，只要搞定这几种就可以了，基于物理度量的的都很容易理解

最常用的 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”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

以五寸的屏幕，1920x1080的分辨率为例

勾股定理算出对角线的分辨率：√(1920²+1080²)≈2203px，对角线分辨率除以屏幕尺寸：2203/5≈440 dpi。在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。所以就造成不同设备下显示效果不同的问题。pc 端可能不太明显，因为标准分辨率和屏幕尺寸就那几种，但是移动端五花八门，什么情况都有可能出现，而且一旦浏览器字体发生改变，页面布局就会被打破

em的出现

相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

为了解决上述问题，有人开始提出使用 em 。一般都是以的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。但是 使用 em 却会带来一系列问题。

如下示例

从上面的示例可以看到，每层的 em 都是根据上层元素来计算的，如果层级过多，估计得那个计算器来专门计算了。而且一旦 dom 结构变化引起层级关系的变化，那么子层级的样式都需要改变。不太建议使用

救世主 rem

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

浏览器兼容性

受限于历史原因，多浏览器之间的兼容问题一直存在，在世也同时得益于 css 解析器对于无效规则忽略而不终止的特性，而且每个浏览器都提供私有属性，多浏览器兼容并不是特别难做，只需要针对每个浏览器加上可以识别的规则就可以。

本文由 lscho 创作，采用知识共享署名4.0国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 03 23, 2018