时间戳

首页 > 解决方案 > 阐明设备像素和 CSS 像素之间的关系

html - 阐明设备像素和 CSS 像素之间的关系

问题描述

这个问题假定：设备像素是绝对的（固定的，不相对于任何东西）。

看完这篇文章，

  1. 我的设备（MacBook Pro 2019）的像素比为2（当缩放级别为 100% 时，每个 CSS 像素中有 2 个设备像素；按 计算.devicePixelRatio）。在 100% 缩放级别下，CSS 像素（用 测量.innerWidth）与设备像素（用screen.width&测量Cmd + Shift + 4 + click）相同。我期望 CSS 像素是设备像素值的一半。

  2. 当放大实际上增加了 CSS 像素的大小（通过增加它等于的设备像素的数量）时，为什么 MDN 说 CSS 像素是一个绝对值？为什么会出现在 MDN 中？

在此处输入图像描述

标签： htmlcss

解决方案

在您的情况下，缩放是在操作系统级别完成的，所以一切都会“撒谎”，因为您的操作系统被设置为对每个应用程序撒谎，包括浏览器。

该window.screen.width值将是您的操作系统报告的值，但在您的系统首选项中，它表示您希望将显示器的分辨率设置为其实际分辨率的一半，这就是您将得到的。

因此，即使这些值也不是设备像素，而是某种 CSS 像素（window.screen.width实际上是“CSS 像素”，ScreenShot应用程序中的像素不是）。

然而，虽然“撒谎”了像素数，但它正确地暴露了像素密度（每个使用的物理像素数px）。window.devicePixelRatio当浏览器本身不应用任何缩放时，这就是您所拥有的。不幸的是，我们不知道浏览器何时应用这种缩放，因此作为 web 开发人员，我们无法知道操作系统的像素密度，也无法知道设备的真实分辨率。

至于第二点，我假设你问为什么 MDN 说CSS 像素是绝对的，而不是你的问题中写的相对的。

这并不意味着 CSS 像素将始终具有相同的物理尺寸输出（顺便说一句，这是不可能的，想想视频投影仪），它与相对于其他长度的相对长度（如%, em,vw等）形成对比.

CSS 像素是绝对的，因为它们不依赖于任何其他长度，即使物理输出可能会有所不同。

推荐阅读