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

【问题标题】：Defining css width/heights in device independent units?在设备独立单元中定义 css 宽度/高度？
【发布时间】：2012-11-27 15:03:16
【问题描述】：

我有一个 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 会以设备 1 上一半的宽度/高度呈现 div。

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

谢谢

【问题讨论】：

你解决过这个问题吗？
对于任何偶然发现这个问题并仍然想知道的人：divs 实际上应该占据相同的物理空间，尽管硬件像素密度不同。有关该主题的更多信息，请参阅A pixel is not a pixel is not a pixel。

标签： html css

【解决方案1】：

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

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

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

【讨论】：

仅供参考，来自第一个链接：“通过在ems中指定填充宽度，填充的宽度相对于字体大小 b> 的 DIV 元素。” 对于 OP 的问题，他应该坚持使用 px（在 CSS 中不是显示器的实际像素大小），或者使用 %是父容器大小的百分比。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

大多数设备都采用以下 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 类应复制粘贴到所有三种分辨率中以获得完美视图。通过这种方式，您可以展示完美的设备特定风格

【讨论】：

“以 1 种分辨率创建的 css 类应复制粘贴到所有三种分辨率中以获得完美的视图。”。 - 如果按字面意思执行此操作，则没有任何好处拥有这三个案例。所以，解释一下这 3 种情况应该有什么不同，以适应这种情况。