CSS 常见单位详解

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

px 是一个长度（length）单位，事实上 CSS 中还有很多的长度单位

整体可以分成两类

绝对长度单位（Absolute length units）
相对长度单位（Relative length units）

CSS中的绝对单位

绝对单位

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

CSS中的绝对单位

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

官方说明：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
- 像素表示画像元素的意思，有时也被称为 pel（picture 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 值