CSS-单位详解

Rsquo
176 阅读3分钟

1. CSS的单位

绝对单位：与其他任何东西都没有关系，通常被认为总是相同的大小。

image.png

  • px：最常用的单位

相对单位：相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。

image.png

  • em：

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

<div class="container">
    <div class="box">我是box</div>
</div>

  • rem

    html {
  font-size: 1.5px;
}

.box {
  /* 计算值为150px */
  width: 100rem;
  height: 100rem;
  /* 字体大小20px */
  font-size: 20rem;
  background-color: orange;
}

  • vw / vh image.png

    .box {
  width: 10vw;
  height: 10vh;
  background-color: orange;
}
面试题：px、rem、em、vw、vh区别？

  • px：px就是pixel像素的缩写，绝对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言

  • rem：rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位，如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

  • em：是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size），如果当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

  • vw、vh、vmax、vmin：四个单位都是基于视窗大小

    • vw 是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100，假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）

    • vh 是相对视口（viewport）的高度而定的，长度等于视口高度的1/100，假如浏览器的高度为500px，那么1vh就等于5px（500px/100）

    • vmin 和 vmax是相对于视口的高度和宽度两者之间的最小值或最大值

2. pixel的深入理解

  • pixel代表的含义：

    • 像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）
    • pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel
    • “像素”表示“画像元素”之意，有时亦被称为pel（picture element）

  • 当前像素的分类:

    • 设备像素（物理像素）

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

    • 设备独立像素（逻辑像素）

      • 如果面向开发者，我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的，开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发， 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念

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

    • CSS像素 -> 逻辑像素

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

3. DPR、PPI

DPR：device pixel ratio

  • 在Retina屏幕（视网膜显示屏）中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）

PPI：每英寸像素（英语：Pixels Per Inch，缩写：PPI）

avatar
文章
阅读
粉丝