常见样式问题六、CSS长度单位(px、em、rem等)及相关内容

一、基本长度单位

1、相对长度单位

  • px:像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。同样尺寸的屏幕,分辨率越大,像素的物理尺寸越小(分辨率=屏幕横向的像素数量 *屏幕纵向的像素数量。所以像素大小 = 屏幕尺寸^2 / 分辨率)。windows系统使用的分辨率一般是96像素/英寸。而mac的用户所使用的分辨率一般是72像素/英寸。
  • ex:所有字体中小写x的高度。目前很多用户代理会将1/2em作为ex的值。
  • em:相对于当前元素内文本的字体大小。如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。注意:对于字体来说,1em = 父元素的font-size;对于其他的,1em=元素的font-size。
  • rem:font size of the root element,是CSS3新增的单位。和em类似,但是是以文档根元素<html>的字体作为参照。

2、绝对单位

绝对单位与屏幕分辨率无关,长度是固定的。绝对单位有:in、cm、mm、pt、pc。

1in = 2.54cm = 25.4mm = 72pt = 6pc。

in:英寸(Inch);

cm:厘米;

mm:毫米;

pt:点(Point);

pc:派卡(Pica)。相当于我国新四号铅字的尺寸。

下面是1英寸的高度:


72pt

3、适用情况分析

  推荐 偶尔使用 不推荐
屏幕 em, px, rem% ex pt, cm, mm, in, pc
打印 em,rem,cm, mm, in, pt, pc, % px, ex  

打印宽度为cm、mm、in等绝对单位, 在CSS内与任何其它地方的意思都一样, 前提是你的输出装置的分辨率够高。在镭射打印机上, 1cm为准确的1cm。但在低分辨率的装置上(如电脑屏幕),CSS不需要该精确度。 确实,在不同的装置,常会有不同的结果。这些单位最好是在高分辨率的装置或打印机上使用。在电脑屏幕以及手持装置上,可能得不到你所期望的结果。

二、px、pt、ppi、dpi、dp、dpr、sp之间的关系

1、px、pt

px:pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元。

pt: point,点,印刷行业常用单位,一般等于1/72英寸。

1pt = (dpi / 72) px

当dpi = 72时,1pt = 1px。

2、dpi

dpi是指dot per inch,用于打印机每英寸多少墨点,该值越高,则图片越细腻。

dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。

 dpi= 屏幕对角线上的pt长度/对角线in长度 = (屏幕横向pt长度^2 + 屏幕纵向pt长度^2)/ 对角线in长度

3、ppi(像素密度)

当DPI的概念用在计算机屏幕上时,就应称之为ppi。ppi是指pixel per inch,像素密度,每英寸像素数,该值越高,则屏幕越细腻。

 ppi= 屏幕对角线上像素数/对角线in长度 = (屏幕横向像素数^2 + 屏幕纵向像素数^2)/ 对角线in长度

电子屏幕中dpi = ppi。

4、dp(设备独立像素,又称逻辑像素)

dp(或dip)指Density-independent pixel, 设备独立像素,又称逻辑像素。dp是安卓开发用的长度单位,1dp指的是逻辑像素,在dpi=160时,1dp=1px,即1单位的逻辑像素= 1单位的物理像素。

 1dp=(ppi/ 160)px

安卓根据像素密度不同,分为以下几种规格:

密度 ldpi     mdpi     hdpi xhdpi xxhdpi
密度值(ppi) 120 160 240 320 480
代表分辨率 240*320 320*480 480*800 720*1280 1080*1920

分辨率描述的是物理像素。根据分辨率、屏幕尺寸可以求出屏幕的密度值ppi。将ppi/160就是1dp的值。

比如屏幕分辨率为480*800,尺寸为3.7英寸。物理像素= (480^1/2 + 800 ^ 1/2)^1/2 = 933。ppi = 933 / 377=252。约等于240,所以应该1dp=(240/160)px=1.5px。即1单位逻辑像素=1.5单位物理像素。

5、dpr(像素设备比)

dpr指Device pixel ratio,中文叫像素设备比,指一个逻辑像素对应多少个物理像素。

像素有两种,一种是物理像素,一种逻辑像素。以前一个逻辑像素是等于一个物理像素的。当一个逻辑像素对应多个物理像素的时候,这时候,显示会更清楚。

通过window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。即:

dpr = window.devicePixelRatio = 物理像素 / 逻辑像素 = ppi /160

逻辑像素 = 物理像素 * dpr。

6、sp

sp指scale-independent pixel,安卓开发用的字体大小单位。

dp和sp都是安卓的开发单位,dp是长度单位,sp是字体单位。sp与dp类似,但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等)。

当文字尺寸是“正常”时,1sp=1dp,而当文字尺寸是“大”或“超大”时,1sp>1dp。


参考文章:

1、EM, PX, PT, CM, IN…

2、设备像素比devicePixelRatio简单介绍(张鑫)

3、扒一扒那些px、pt、ppi、dpi、dp、sp之间的关系

猜你喜欢

转载自blog.csdn.net/c11073138/article/details/79510713