CSS 中的长度单位

css 中的长度单位有px,em,rem,vw/vh等等.

这些长度单位整体可以分为两类:

绝对长度单位
相对长度单位

CSS 中的绝对单位:

绝对长度单位与其他任何东西都没有关系,通常被认为是相同的大小.
比如cm,mm,m,in,pc,px等

怎么理解CSS 中的像素
注意在绝对单位的概念里,像素是一个固定的长度,是一英寸的1/96,大概相当于 0.0264cm,相当于0.000264m,这是一个很小的长度.

CSS 中的相对单位

相对单位长度

相对长度单位是相对于一些其他东西而产生的单位.
比如 相对于父元素字体的大小产生的单位,或者相对于视图端口大小产生的单位.
使用相对段位的好处是,经过一些仔细的规划,您可以使文本或其他元素的大小与页面上的其他内容相呼应.

怎么理解CSS 中的像素

前度开发中的像素代表什么?

我们在写 CSS 样式的时候,通常是用像素为单位的,比如设置字体大小为18px,设置一个div的高度为100px,宽度为100px.

.box {
    width:100px;
    height:100px;
    fontSize:18px;
}

当这样设置样式后,屏幕上确实可以看到一个大小,但是这个大小的真实长度是多少? 它代表的真实含义是什么?

我们经常说的一个电脑的分辨率,手机的分辨率和CSS 中的像素是什么关系呢?

其实像素在不同的领域是有不同的名称的,这里暂且分为三大类:

设备像素(也称之为物理像素)
**设备独立像素(**也称为逻辑像素)
CSS 像素

我们先来了解一下这些概念,再解决上面的问题.

设备像素,也叫物理像素

设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出场后就不会改变了
我们在购买显示器或者手机的时候,提到的设备分辨率就是设备像素的大小.
比如 iphoneX的分辨率是1125X2436,指的就是设备像素.

设备独立像素,也叫逻辑像素

如果面向开发者我们使用设备像素显示一个100px的宽度,那么在不同的屏幕上显示效果是不同的.(比如在2k的屏幕上,100px占用的物理长度是小于1080p分辨率的)
开发者针对不同的屏幕很难进行较好的适配,编写程序必须了解用的分辨率来进行开发,那么这样开发起来是很头疼的,而且貌似开发中我们并没有考虑这个问题,但是开发出来的程序依然没有问题,这是为什么呢?
这是因为在设备像素之上,操作系统为开发者进行了一层抽象,提供了逻辑像素的概念.
比如你购买了一台显示器,在操作系统上是以1920X1080设置的显示分辨率,那么无论你购买的是2k,4k的显示器,对于开发者来说,都是1920X1980的大小.

CSS 像素

CSS 中我们经常使用的单位也是像素,他在默认情况下等同于设备独立像素(也就是逻辑像素)
毕竟逻辑像素就是为了方便我们开发者而设置的概念.

我们可以通过JavaScript 中的 screen.width 和screen.height 来获取电脑的分辨率

怎么理解CSS 中的像素

解决疑问

1. 在不同屏幕上设置的100px的物理大小的如何计算

先给出公式:

物理长度 = 100 / 逻辑像素长度(电脑设置的分辨率长度) * 屏幕实际的物理尺寸的长度

物理宽度 = 100 / 逻辑像素宽度(电脑设置的分辨率宽度) * 屏幕实际的物理尺寸的宽度

以我的屏幕为例:

物理大小为57cm * 32cm

设备像素分辨率为:2560*1440

单个像素点的长度 = 57cm / 2560 = 0.022cm

单个像素点的宽度 = 32cm / 1440 = 0.022cm

可见每个像素点大概齐是正方形的😝

我的操作系统设置的分辨率也是 2560 * 1440 的

所以我的物理像素的大小和实际像素的大小是一致的,也就是说我直接计算物理像素的长度,就是100px 实际占用的长度.

所以 : 100px = 0.022cm * 100 = 2.2cm

用公式计算一下呢: 100 / 1440 * 32cm = 2.2cm

验证完毕

100px 代表的意义

嗯,意义这个词没法太好解释.

可以这样理解,57cm长度的一条线被分割成了2560个小段,100px占据了其中的100个小段的长度.

假如我把屏幕分辨率设置成了 1920 * 1080, 那100px的意义也发生了改变.

57cm长度的一条线被分割成了1920个小段,100px占据了其中的100个小段的长度.

3.分辨率和 CSS 中的像素的关系

分辨率 指的是 设备的物理像素,CSS 中的像素 指的是 系统设置的分辨率即逻辑分辨率.

以我的屏幕为例,**假如系统的分辨率设置为了 2560*1440**

那么分辨率和 CSS 中的像素的关系为:

1CSS 中的像素 = 1 分辨率中的像素 = 屏幕上 0.022cm * 0.022cm 的一个正方形亮点

**假如系统的分辨率设置为了 1920 * 1080**

那么分辨率和 CSS 中的像素的关系为:

**1CSS 中的像素 = 1.33 分辨率中的像素 = 屏幕上 (0.02cm * 1.33 ) * (0.02cm * 1.33 ) 的一个正方形的亮点

番外概念 DPR && PPI

DPR

DRR:device pixel ratio

2010年,iPhone 4问世,不仅仅带来了移动互联网,还带来了Retina 屏幕
Retina 屏幕翻译为视网膜显示屏,可以为用户带来更好的显示.
在Retina 屏幕中,一个逻辑像素在长度上对应两个物理像素,这个比例称之为设备像素比(device pixel ratio)
我们可以通过 window.devicePixelRatio 获取到当前屏幕的DPR 值;

PPI:每英寸像素(英语:Pixls per Inch,缩写PPI)

通常用来表示一个打印图像或者显示器上像素的密度
前面我们提过的1英寸 = 2.54 厘米,在工业领域被广泛应用;
所以手机厂商经常宣传 440ppi,你悟了吗? 就是在2.54厘米的屏幕上有 440个物理像素点 😄

原文链接：https://juejin.cn/post/7315265525772402751 作者：方木头

怎么理解CSS 中的像素

CSS 中的长度单位