CSS中的常见单位

在css中单位可以被划分为两类

绝对长度单位 (Absolute length units)
- 绝对长度单位与其他任何东西都没有关系，通常设置了是多少，其值就是多少
- 最为常见的绝对长度单位为 px，inch
- 1inch = 2.54cm (在逻辑像素为1920 * 1080的情况下 1 inch = 96px )
相对长度单位 (Relative length units)
- 相对长度单位其大小相对于一些其它的值
- 当其相对的值发生改变的时候，相对长度单位的大小也会相应的发生改变
- 常见的相对长度单位值为em，rem， vw，vh

<!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;

      /* 1.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

<!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: 1.5px;
    }

    .box {
      width: 100rem;
      height: 100rem;
      font-size: 20rem;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <div class="box">
    我是box
  </div>

</body>
</html>

vw/vh/vmax/vmin

vw (viewport width)和vh (viewport height) 相对的是视口的宽度或高度

在实际开发的过程中，一般使用vw的时候会多一点

因为对于移动设备，即使宽度一致，他们的高度也可能是不一致的

也就是说相比较移动设备的宽度，移动设备的高度更难进行划分

单位	相对于
1vw	视口宽度的1%
1vh	视口高度的1%
1vmax	vmax表示的是视口宽度和视口高度两者最大的那个值的1%
1vmin	vmin表示的是视口宽度和视口高度两者最小的那个值的1%

<!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>
  
  /*
  清除body的默认margin和padding
  不然在设置子元素宽度为100vw的时候，会出现滚动条
  高度同理

  即设置margin又设置padding是因为
  虽然绝大多数浏览器的body的默认边距是通过margin来实现的
  但是依旧有一部分的浏览器的body的默认边距是通过padding来进行实现的
*/
    /* body {
      margin: 0;
      padding: 0;
    } */

    .box {
      /* width等于视口的宽度 */
      width: 10vw;
      /* height等于视口的高度 */
      height: 10vh;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

像素的分类

像素是影响显示的基本单位，是浏览器中显示的最基本单元

pix是英语单词picture的常用简写，加上英语单词“元素”element

所以pixel是picture element的简写

在浏览器中，像素被分为了三类:

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

物理像素

设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了

一般情况下，物理像素表示的是一个屏幕最大可以显示多少的像素值

逻辑像素

市面上有多种物理像素的显示器，此时对应的网页适配会变得十分麻烦

例如如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的

开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行单独开发

这显示是不方便也是不现实的

为此操作系统对物理像素进行了抽象，提出了逻辑像素的概念

对于逻辑像素，无论你物理像素是多少，其对应的逻辑像素都是一致的

例如: 你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小

PS: 逻辑像素一般被我们称之为分辨率，在PC上可以对分辨率进行自主设置，但是在手机上，一般无法对分辨率进行自主设置

CSS像素

在CSS中的 CSS像素对应的就是逻辑像素，使用的单位是pixel

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

DPR 和 PPI

DPR: device pixel ratio

2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕

Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示体验

在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，

此时在x轴方向上对应两个物理像素，在y轴方向上对应两个物理像素

所以在Retina屏幕中，一个逻辑像素对应四个物理像素

此时一个逻辑像素可以表示的精度和色值就变得更为的丰富

而此时物理像素/逻辑像素的比值就被称之为设备像素比(device pixel ratio)

早期的Retina屏幕的DPR的值为2

现在随着Retina屏幕的发展，自IphoneX开始，Retina屏幕的DPR开始变为3

也就是一个逻辑像素使用九个物理像素进行显示

PPI: Pixels Per Inch

PPI :每英寸像素(英语:Pixels Per Inch，缩写:PPI)

PPI的值越大，那么每英寸所对应的像素密度就越高，其可以表示的图像的精细程度也就越高

前面我们提过1英寸=2.54厘米，在工业领域被广泛应用；

屏幕分辨率就是设备像素也就是物理像素

倍图

在网页中使用的图片一般都是位图，那么就意味着如果图片放大的时候，图片会变得模糊，而图片变小的时候，图片的清晰度不变，但是精度会有略微缺失

假设存在一个50px * 50px的图片，放置在一个DPR为2的屏幕上的时候，1px * 1px对应着2px * 2px的物理像素

所以此时一个50px * 50px的图片放置到DPR为2的屏幕的时候，图片会被拉伸放大，此时图片清晰度就会减低

因此对于DPR为2的屏幕，图片一般都会设计成两倍图，也就是将图片的尺寸从50px * 50px变成100px * 100px

那么在DPR为2的屏幕上进行展示的时候，虽然图片被设置成50px*50px，但其实际在屏幕上渲染出的实际物理像素依旧是100px*100px，此时图片的清晰度就不会减低了

对应着在DPR为3的屏幕上使用三倍图，在DPR为4的屏幕上使用四倍图，依次类推

20_CSS中的常见单位