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

Question

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

例如，假设我有两个 5 英寸宽的设备。第一个显示器的设备像素比=1，第二个显示器的设备像素比=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 似乎将 div 呈现为设备 1 上宽度/高度的一半。

如果是这种情况，有没有办法在与设备无关的单元中定义我们的宽度/高度？或者，在我们检查 device-pixel-ratio 属性之后，我们是否必须在页面加载等时手动缩放所有样式？

谢谢

score 3 · Accepted Answer

使用emunit 重新定义你的 css 大小会很好。

本参考资料中有一些很好的链接。请检查这些

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

score 0 · Accepted Answer

这听起来更像是您需要使用百分比而不是像素。所以它会使用你屏幕的“百分比”数量

.myDivStyle {
    width:  50%;
    height: 25%;
}

它将解决像素数量的问题。如果您使用 Iphone 和 Android 的屏幕，这将解决问题，因为它们使用两种完全不同的分辨率。例如，我相信 Iphone 使用 320 by .. something，而我自己的三星 Galaxy 使用我认为 480 by something。（不知道真实值）

score 0 · Accepted Answer

大多数设备将采用以下 3 种分辨率 1) HVGA-VGA 的一半 (320 x 240) 2) WVGA-wide VGA(800x 480) - 几乎是 HVGA 的 1.5 倍 3) HVGA 2x- (640 x 960) - IPHONE 4 使用此分辨率

为上述三种分辨率编写单独的 css 文件

@Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}

或者

@Media screen and (min-device-pixel-ratio: 2)
{/* css files here*/

}

对其他分辨率执行相同操作。以 1 分辨率创建的 CSS 类应复制粘贴到所有三种分辨率中以获得完美视图。通过这种方式，您可以展示完美的设备特定风格

3 回答 3