CSS 常见单位详解

编写CSS时,我们经常会使用 px 来表示一个长度(大小),比如 font-size 设置 18px,width 设置为100px

px 是一个长度(length)单位,事实上 CSS 中还有很多的长度单位

整体可以分成两类

  • 绝对长度单位(Absolute length units)
  • 相对长度单位(Relative length units)

CSS中的绝对单位

绝对单位

  • 它们与其他任何东西都没有关系,通常被认为总是相同的大小
  • 这些值中的大多数用于打印时比用在屏幕输出时更有用,例如,我们通常不会在屏幕上使用cm
  • 唯一一个经常使用的值,就是 px (像素)

CSS中的绝对单位

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

em

  • 官方说明:em unit
    • Equal to the computed value of the font-size property of the element on which it is used.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
        font-size:15px
    }
    .box{
      /* font-size: 20px; */
      /* 如果自己没有设置,那么会继承父元素的 font-size */
      /* 如果自己font-size中有写em单位,可以理解成相对于父元素
        但是更准确的理解依然是相对于自己的
      */
      font-size: 1em;
      /* em 相对自己的 font-size */
      width: 10em;
      height: 5em;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">我是box</div>
  </div>
</body>
</html>

rem
- rem unit
- Equal to the computed value of the em unit on the root element

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html{
      font-size: 2px;
    }
    .box{
      width: 100rem;
      height: 100rem;
      font-size: 20em;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">我是box</div>
</body>
</html>

vw/vh
- vw 相对于视口的宽度
- vh 相对于视口的高度

 .box{
      width: 10vw;
      height: 10vh;
      background-color: orange;
    }

当我们在聊 pixel 时,到底再聊什么?

我们一直在使用 px 单位,px 是 pixel 单词的缩写,翻译为像素

那么像素到底是什么
- 像素是影响显示的基本单位(比如屏幕上看到的画面,一幅图片)
- pix 是英语单词 picture 的缩写,加上单词 元素 element,就得到了 pixel
- 像素表示画像元素的意思,有时也被称为 pelpicture element

像素的不同分类(一)

但是这 100 个 pixel 到底是多少呢
- 我们确实可以在屏幕上看到一个大小,但是这个大小代表的真实含义是什么
- 经常说一个电脑的分辨率,手机的分辨率,这个又和 CSS 当中的像素有什么关系

这里我们要深入到不同的像素概念中,来理解 CSS 中的 pixel 到底是什么意思

像素单位常见的有三种像素名称
- 设备像素(也称为物理像素)
- 设备独立像素(也称为逻辑像素)
- CSS 像素

物理像素和逻辑像素

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

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

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

CSS 像素
- CSS 中我们经常使用的单位也是 pixel,默认情况下等同于设备独立像素(也即是逻辑像素)
- 毕竟逻辑像素才是面向开发者的

我们可以通过 javascript 中的 screen.width 后台 screen.height 获取到电脑的分辨率

DPR、PPI

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

PPI:每英寸像素(Pixels Per Inch)
- 通常用来表示一个打印图像或者显示器上像素的密度
- 1英寸=2.54厘米,英寸在工业领域被广泛应用

Q.E.D.