什么是移动设备中的 CSS 像素？
What is a CSS pixel in mobile devices?
我一直在编写后端程序，并在两周前开始学习 CSS。这些天我一直在使用笔记本电脑，现在开始学习响应式设计以及移动设备的行为方式。我一直在努力理解具有更高像素密度的设备的几个概念，尤其是移动设备中最终显示的像素有多大。我看了很多书，结果比以前更糊涂了。
我知道有两种类型的像素：a) 设备像素 - 实际像素
在设备中（例如我的笔记本电脑有 1366 x 768）和 b) CSS 像素 - 我们在 CSS 中使用的像素（例如宽度：200px）。还有一个设备像素比，表示多少设备像素等于多少 CSS 像素。在我的笔记本电脑上，这个比率是 1，所以我在 CSS 中使用的每个像素映射到每个设备像素。在我的笔记本电脑上，如果我创建一个宽度为：660px 的框，这将是我视口宽度的大约一半：（1366 -45)/2 =660px，滚动条等的 45px .
但是我不明白当我们为移动设备使用像素值时会发生什么。考虑 Apple iphone 6 的情况，它有 750 个设备像素和 375 个 CSS 像素，像素比为 2 。现在，如果我绘制一个宽度为 375 像素的框，它在我的 Chrome 移动模拟器中显示为 150（不知道这是什么像素），如下所示：
我的问题是：
- 移动模拟器中的标尺不是 CSS 像素吗？ （因为标尺的宽度显示为 375 像素）。
- 如果标尺在 CSS 像素那么为什么我的盒子（宽度是 375 CSS 像素）
在标尺上显示为 150 像素？移动模拟器中的标尺与我在 CSS 中使用的 px 之间有什么关系？
- 那么设备像素到底有什么用呢？我看不到吗？
我想了解的是，我如何知道相对于相关设备的 CSS 宽度/物理宽度，我的像素将显示多大。
将此添加到可能有助于重置浏览器缩放级别或页面宽度
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, minimum-scale=0.5">
我一直在编写后端程序，并在两周前开始学习 CSS。这些天我一直在使用笔记本电脑，现在开始学习响应式设计以及移动设备的行为方式。我一直在努力理解具有更高像素密度的设备的几个概念，尤其是移动设备中最终显示的像素有多大。我看了很多书，结果比以前更糊涂了。
我知道有两种类型的像素：a) 设备像素 - 实际像素 在设备中（例如我的笔记本电脑有 1366 x 768）和 b) CSS 像素 - 我们在 CSS 中使用的像素（例如宽度：200px）。还有一个设备像素比，表示多少设备像素等于多少 CSS 像素。在我的笔记本电脑上，这个比率是 1，所以我在 CSS 中使用的每个像素映射到每个设备像素。在我的笔记本电脑上，如果我创建一个宽度为：660px 的框，这将是我视口宽度的大约一半：（1366 -45)/2 =660px，滚动条等的 45px .
但是我不明白当我们为移动设备使用像素值时会发生什么。考虑 Apple iphone 6 的情况，它有 750 个设备像素和 375 个 CSS 像素，像素比为 2 。现在，如果我绘制一个宽度为 375 像素的框，它在我的 Chrome 移动模拟器中显示为 150（不知道这是什么像素），如下所示：
我的问题是：
- 移动模拟器中的标尺不是 CSS 像素吗？ （因为标尺的宽度显示为 375 像素）。
- 如果标尺在 CSS 像素那么为什么我的盒子（宽度是 375 CSS 像素） 在标尺上显示为 150 像素？移动模拟器中的标尺与我在 CSS 中使用的 px 之间有什么关系？
- 那么设备像素到底有什么用呢？我看不到吗？
我想了解的是，我如何知道相对于相关设备的 CSS 宽度/物理宽度，我的像素将显示多大。
将此添加到可能有助于重置浏览器缩放级别或页面宽度
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, minimum-scale=0.5">