CSS中单位简介

在CSS中除了有px一个长度单位外还有其它的长度单位，总体上来说可以分为绝对长度单位和相对长度单位

CSS中绝对单位

绝对单位与其它任何东西都没有关系，通常被认为总是相同的大小；这些值中的大多数在用于打印时比用于屏幕输出时更有用，例如，通常不会在屏幕上使用cm; 而经常使用的值是px

绝对单位	名称	等价换算
cm	厘米	1cm = 96px/2.54
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	十二点活字	1pc = 1/16th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

CSS中相对单位

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

相对单位	相对于
em	在font-size中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，比如width, 那么元素宽度就是相对于自己字体的大小
ex	字符 x 的高度
ch	数字 0 的高度
rem	根元素字体的大小，相对的是HTML元素下字体的大小
lh	元素的line-height
vw	视窗宽度的1%，视口宽度均分100份，每一份占据的宽度
vh	视窗高度的1%，视口高度均分100份，每一份占据的高度

CSS pixel

像素是影响显示的基本单位

像素分类

像素单位常见的有三种像素名称

• 设备像素 称之为物理像素
• 设备独立像素 称之为逻辑像素
• CSS像素

设备像素（物理像素）

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

独立像素（逻辑像素）

• 如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的
• 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发
• 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念
• 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小

CSS 像素

• CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）；
• 毕竟逻辑像素才是面向我们开发者的

提示

可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率

DPR, PPI

DPR：device pixel ratio(设备像素比)

一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比(device pixel ratio)

提示

通过window.devicePixelRatio获取到当前屏幕上的DPR值

PPI：Pixels Per Inch (每英寸像素)

通常用来表示一个打印图像或者显示器上像素的密度；