尺寸与像素

前言

在MDN有关响应式web的文章中，有过以下描述：

如果你要支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以使用 srcset 结合 x 语法——一种更简单的语法——而不用 sizes，来让浏览器选择合适分辨率的图片。你可以参考这个示例 srcset-resolutions.html（或查看源代码）：

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

其中1x代表用一个CSS像素表示一个设备像素(默认所以不用写出来)，2x代表用一个CSS像素表示两个设备像素

Viewport

视口（viewport）是指浏览器窗口中用于显示网页内容的区域。它通常与浏览器窗口的大小相同，但也可以通过设置来改变。

单位

在CSS中，您可以使用不同的单位来指定长度和尺寸。这些单位包括像素（px）、em、rem、百分比（%）、视口宽度（vw）和视口高度（vh）等。

• px：像素（px）是一种绝对单位，它表示屏幕上的一个点。使用px可以保证元素在不同设备上具有一致的大小，但可能会影响响应式设计

• em：em是一种相对单位，它相对于父元素的字体大小。使用em可以使元素的大小随父元素的字体大小而改变，有助于实现响应式设计。

• rem：rem也是一种相对单位，它相对于根元素（即元素）的字体大小。与em不同，rem不受父元素字体大小的影响，因此可以更好地控制元素的大小。注意本身没有字体大小，但是可以设置font-size的值：

  html {
  	font-size: 16px;
  }

• %：百分比（%）是一种相对单位，它相对于父元素的尺寸。使用%可以使元素的大小随父元素的尺寸而改变，有助于实现响应式设计。

• vw：视口宽度（vw）是一种相对单位，它相对于视口的宽度。1vw等于视口宽度的1%。使用vw可以使元素的大小随视口宽度而改变，有助于实现响应式设计。

• vh：视口高度（vh）也是一种相对单位，它相对于视口的高度。1vh等于视口高度的1%。使用vh可以使元素的大小随视口高度而改变，有助于实现响应式设计。

像素

• CSS像素（CSS Pixel）是适用于Web编程的逻辑像素，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。**设备独立像素（Device Independent Pixel）**是与设备无关的逻辑像素，代表 可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。

• 设备像素（Device Pixel）也称为物理像素，是设备能控制显示的最小单位。我们常说的1920×1080像素分辨率就是用的设备像素单位。设备独立像素就是在设备像素的基础上人为定义的一层逻辑像素。举个例子，一个屏幕的 物理像素是2560×1440，但是我们可以人为定义这个屏幕就是1280×720，所以1个设备独立像素就用4个设备像素显示。在前言的例子中可以写为4x

• 简而言之，CSS像素和设备独立像素都是逻辑上的概念，它们与设备无关，可以通过程序控制使用。而设备像素则是物理上的概念，它与设备相关，表示设备能控制显示的最小单位。希望这些信息能够帮助您了解CSS像素和设备像 素之间的区别。

杂谈

在 HTML 文件中的head 标签里，你将会找到这一行代码 <meta name="viewport" content="width=device-width">：这行代码会强制让手机浏览器采用它们真实可视窗口的宽度来加载网页（有些手机浏览器会提供不真实的可视窗口宽度，用比真实视口更大的宽度加载网页，然后再缩小加载的页面，这样的做法对响应式图片或其他响应式设计，没有任何帮助）。