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属性后，我们是否必须在页面加载等上手动缩放所有样式？

谢谢

Answer 1

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

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

上述所有链接都强调，em最适合您希望文档在各种设备上运行良好的情况。

Answer 2

这听起来更像是你需要使用百分比而不是像素。因此，它将使用“百分比”的屏幕数量

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

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

Answer 3

大多数设备都属于以下3种分辨率 1）HVGA- VGA的一半（320 x 240） 2）WVGA宽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类应该在所有三种分辨率中进行复制粘贴，以获得完美的视图。通过这种方式，您可以展示完美的设备特定风格