css 长度单位知多少 - XIN.

css 长度单位知多少

  in   tech with  0  comment

写在前面:在这个是个 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的分辨率为例
1447148274103.jpg

勾股定理算出对角线的分辨率:√(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 解析器对于无效规则忽略而不终止的特性,而且每个浏览器都提供私有属性,多浏览器兼容并不是特别难做,只需要针对每个浏览器加上可以识别的规则就可以。

Responses