CSS --- CSS常见单位

coderklaus
179 阅读8分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情

css中的常见单位

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

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

em

em相对的是自身元素的font-size的大小

.box {
  font-size: 10px;
  /* width -> 20 * 10px */
  width: 20em;
  /* height -> 20 * 10px */
  height: 20em;
  background-color: skyblue;
}

.box {
  /* 浏览器中一般默认的字体大小为16px */

  /* width -> 20 * 16px */
  width: 20em;
  /* height -> 20 * 16px */
  height: 20em;
  background-color: skyblue;
}

/* 父元素 */
.container {
  /* font-size是一个继承属性 */
  font-size: 10px;
}

/* 子元素 */
.box {
  /* 子元素的字体大小为父元素继承过来的10px */

  /* 20 * 10 -> 200 */
  width: 20em;
  /* 20 * 10 -> 200 */
  height: 20em;
  background-color: skyblue;
}

/* 父元素 */
.container {
  /* font-size是一个继承属性 */
  font-size: 10px;
}

/* 子元素 */
.box {
  /* 子元素的大小为 2 * 10 -> 20 */
  font-size: 2em;

  /* 20 * 20 -> 400 */
  width: 20em;
  /* 20 * 20 -> 400 */
  height: 20em;
  background-color: skyblue;
}

rem

rem相对的是根元素的字体大小，也就是html元素的字体大小

:root {
  font-size: 10px;
}

.box {
  /* 10 * 10 -> 100 */
  width: 10rem;
  /* 10 * 10 -> 100 */
  height: 10rem;
  background-color: skyblue;
}

vw/vh/vmax/vmin

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

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

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

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

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

LiBMUp.png

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

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

.box {
  /* width等于视口的宽度 */
  width: 100vw;
  /* height等于视口的高度 */
  height: 100vh;
  background-color: skyblue;
}

像素的分类

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

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

所以pixel是picture element的简写

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

  1. 设备像素(也称之为物理像素)
  2. 设备独立像素(也称之为逻辑像素）
  3. 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屏幕中，一个逻辑像素对应四个物理像素

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

LifTkO.png

Lif98U.png

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

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

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

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

PPI: Pixels Per Inch

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

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

  1. 屏幕分辨率 就是 设备像素 也就是 物理像素
  2. x2+y2\sqrt{x^2+y^2} 指代的屏幕的尺寸，也就是屏幕对角线的距离
  3. 和PPI类似的有DPI，两者功能是一致的，唯一的区别是:
    • PPI用于电子设备，表示的是每英寸的物理像素
    • DPI用于打印设备，表示的是每英寸的点数

多倍图

在iphone4出现之前，浏览器中1个逻辑对应一个物理像素

但是自iphone4推出Retina屏之后，逻辑像素和物理像素之间再也不是一一对应的

Retina屏通过增加逻辑像素对应的物理像素个数，来达到渲染更加高清图像的目的

image.png

从上图可以看到

  1. 对于普通屏幕而言，一个物理像素 === 一个逻辑像素
  2. 对于DPR为二的屏幕而言，两个物理像素 === 一个逻辑像素
  3. 依次类推

每个设备都有不同的 DPR，更高分辨率的设备具有更高的 DPR，目前常见的DPR为2或者3

这些设备可以看到更清晰的图像，因为它们将更多的屏幕像素用于每个 CSS 像素

这意味着图像中的细微差别可以更好地表现出来

所以因为Retina屏的存在，这就导致了图片在移动端会根据DPR进行拉伸，从而导致图片变得模糊

假设存在100*100的图片

  • 对于dpr = 1 的普通屏， 会按照 100 * 100 的物理像素进行渲染 - 图片正常渲染
  • 对于dpr = 2 的 Retina屏，会按照 200 * 200 的物理像素进行渲染 - 图片被拉伸
  • 对于dpr = 3 的 Retina屏，会按照 300 * 300 的物理像素进行渲染 - 图片被拉伸

而在网页中使用的图片(jpg, png等)一般都是位图，这意味着他们都是由像素点组成

当图片被拉伸的时候，单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊

image.png

所以就需要使用多倍图提高图片质量，解决高清设备中的模糊问题

也就是说 假设页面中需要渲染 100px * 100px的图片，那么就需要采用200px * 200px的图片

在 dpr = 2 的设备中，因为图片被拉伸，那么正好显示 200 * 200的图片

在 dpr = 1 的设备中，设备在渲染位图的时候，会采用缩减像素采样的算法渲染图片，也就是说通过牺牲图片的精细度和锐利度来进行图片的渲染

image.png

示例：

以一张icon 来说，理论上，1个 逻辑像素 对应于1个 物理像素 ，图片才能得到完美清晰的展示

那么假设375px设计稿的icon为40 * 40px，如果要渲染在dpr为2的Retina屏上时，就需要使用

80 * 80px的icon

image.png

这也就是为什么设计师在绘制设计稿的时候，绝大多数参考的都是750px(iphone6 的物理像素)，而不是375px ( iphone6 的逻辑像素 )， 因为此时设计稿导出的图片默认就是二倍图

avatar
文章
阅读
粉丝