在从移动设备和 DPI 的角度理解网页设计方面，我正进入一个困难时期。
在我刚刚创建 300 像素高之前，例如一个 div，它总是 300 像素高并且在所有设备上看起来都一样，因为显示器实际上总是具有相同的 dpi。所以 300 像素 = 300 像素等
现在移动已经到来（不久前到来:-)，但我还没有设法从 CSS 和像素方面理解它）。
所以了解我有一个 300 像素高的 div，我如何确保它在具有不同 DPI 的不同移动设备上看起来相同大小（至少在高度方面）？
这是自动使用视口的元标记完成的吗？还是这与它无关？
没有自动过程，我需要使用某种实时调整大小吗？我听说过 CSS 像素，但不确定这是否与它有关，或者我是否能够使用它。
【问题讨论】：
标签： css mobile sass media-queries
如果您在 html 中使用这样的元标记：
<meta name="viewport" content="height=device-height, initial-scale=1.0">
你的 div 的 css 看起来像这样：
div {
height:300px;
}
那么你的 div 在所有设备上都应该是 300px 高。
请记住，台式机和移动设备的 DPI 完全不同，因此台式机上 300 像素高的 div 与 iPhone 上 300 像素高的 div 具有不同的实际尺寸。
您也可以考虑避免使用像素，而在指定元素的尺寸时使用百分比。百分比比像素更容易在设备之间移动。
您还可以使用媒体查询为元素指定不同的像素大小，具体取决于设备的尺寸。 见：Media queries at w3schools
为了验证这一点，我创建了一个这样的 html 页面：
<html>
<head>
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<style>
.sample-fixed {
border: 2px solid purple;
width: 100px;
height: 100px;
position: absolute;
}
.sample-percentage {
border: 2px solid green;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="sample-fixed">
</div>
<div class="sample-percentage">
</div>
</body>
</html>
然后我将页面加载到 Chrome 中。我启动了 Chrome 的 Developer Tools（在 Chrome 中按 F12）。然后单击控件以切换设备工具栏（红色圆圈）。
在地址栏下方，浏览器现在有一个可以更改设备格式的菜单。我确保 scale 设置为 100%，然后尝试了不同的设备模拟器。
紫色框总是出现具有相同数量的像素（100x100，请参阅 sample-fixed css 类定义）。我测试了纵向和横向。 （我偶尔不得不将 scale 改回 100%，因为开发者工具会为我选择一个新值。）
测试显然取决于开发者工具模拟器的准确性和我的视力。
【讨论】：