html - 在设备独立单位中定义 css 宽度/高度？

Question

我有一个 div，我想弄清楚如何让它占据相同数量的屏幕空间，而不管设备显示密度如何。

例如，假设我有两台设备，每台设备的宽度均为 5 英寸。第一个显示器的 device-pixel-ratio=1，第二个显示器的 device-pixel-ratio=2。

Device 1: 5 inches wide, device-pixel-ratio=1
Device 2: 5 inches wide, device-pixel-ratio=2

所以第二个设备在同一空间中包含两倍的像素。

我的 div 样式:

.myDivStyle {
    width: 100px;
    height: 50px;
}

如果我理解正确的话，设备 2 会以设备 1 上一半的宽度/高度呈现 div。

如果是这样的话，有没有办法在设备独立的单元中定义我们的宽度/高度？或者我们是否必须在检查设备像素比属性后在页面加载等情况下手动缩放所有样式？

谢谢

Answer 1

使用 em 单位重新定义您的 css 大小会很好。

此引用资料中的一些很好的链接。请检查这些

1. w3.org
2. w3.org
3. css-tricks

以上所有链接都表明，em 最适合您希望文档在各种设备上表现良好的情况。