牛叔叔 的笔记

好好学习

2022-09-16 09:37

CSS中的度量单位对比

牛叔叔

WEB前端

(526)

(0)

收藏

CSS中的度量单位分为相对和绝对两种。

1、绝对度量单位:

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

比如我们准备设计一张A4纸的打印表格,使用绝对单位就可以精确控制。

1)cm(centimeter):厘米

2)mm(millimeter):毫米

3)in(inch):英寸, (1in = 96px = 2.54cm)

4)pt(point):磅, 确切的说法是一个专用的印刷单位,大小为1/72英寸,用于印刷。

5)pc(pica):派卡,大约 12pt,相当于我国新四号铅字的尺寸


2、相对单位

1)em:相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体大小都是16px,则2em == 32px。em的值并不是固定的;em会继承父级元素的字体大小。

2)ex:根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中,浏览器将通过 em 的值除以 2 得到 ex 的值。为什么这样计算呢?因为 x 高度计算比较困难,且小写 x 的高度值是大写 x 的一半;另一个影响 ex 单位取值的是字体,由于不同字体的形状差异,这也导致相同大小的两段文本,但由于字体设置不同,ex 单位的取值也会存在很大的差异。

3)ch:CSS3新增单位,数字 0 的宽度

4)rem:CSS3新增单位,rem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。

5)vw:CSS3新增单位,viewpoint width,视窗宽度,1vw=视窗宽度的1%。如果浏览器的width是900px,1vw求得的值为9px

6)vh:CSS3新增单位,viewpoint height,视窗高度,1vh=视窗高度的1%。如果浏览器的高是900px,1vh求得的值为9px

7)vmin:CSS3新增单位,vw和vh中较小的那个。如果浏览器设置为1100px宽、700px高,1vmin会是7px

8)vmax:CSS3新增单位,vw和vh中较大的那个。如果浏览器设置为1100px宽、700px高,1vmax会是11px

9)%:百分比也是一个相对单位值。百分比值总是通过另一个值来计算,一般参考父对象中相同属性的值。例如,如果父元素宽度为 500px,子元素的宽度为 50%,则子元素的实际宽度为 250px。

10)px:像素 (1px = 1/96th of 1in)   px单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。譬如,Windows的用户所使用的分辨率一般是96像素/英寸,而MAC的用户所使用的分辨率一般是72像素/英寸。

这里要区分两个概念,就是css中的px并不等价于我们日常所说的设备像素。

设备像素设是物理概念,指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素。
在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,相对的是设备像素(device pixel)。

比如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而CSS逻辑像素数为320 x 568px。


设备像素与CSS像素之间的换算是如何产生的呢?
这就需要要谈到每英寸像素(pixel per inch 常说PPI)设备像素比(device pixel ratio)

每英寸像素(pixel per inch):
ppi,表示每英寸所拥有的像素(pixel)数目,数值越高,代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素

设备像素比(device pixel ratio):
以上计算出ppi是为了得到密度分界,获得默认缩放比例,即设备像素比

ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个高大上的名字——Retina)。

获得设备像素比后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素。


0条评论

点击登录参与评论