Question

我有一个简单的网页，可以显示一些文字和图片，并试图找到一种处理多个屏幕的非复杂方式。

我查看了the docs，我现在唯一可以看到的方法就是创建三个单独的css文件，一个用于低文件，一个用于中等，一个用于高分辨率。不幸的是，每个元素/图像都必须具有不同的字体大小和尺寸。

考虑到每个hdpi元素应该是正常元素的1.5倍，这似乎相当浪费。在使用hdpi版本的图像而不是mdpi版本时，难道没有办法让Android为我们自动缩放吗？

我在这里错过了什么吗？

Answer 1

您可以尝试在样式表中使用媒体查询。

基本上你说如果视口小于X量然后启动（或更改）此样式，或者如果视口大于Y量，则实现（或更新）此样式。您可以拥有任意多种可能性，并且不需要额外的样式，因为更改是在达到特定宽度时选择的特定类或ID上实现的。

查看Responsive Web Design

上的这篇文章

希望这是你想要的那种信息吗？

Answer 2

我只是看了同样的问题。好吧，似乎Android不会根据屏幕大小自动调整Webview的内容（图像，字体大小等），就像使用应用程序图标自动调整一样。

但是，关于图标，实际上，它也不会自动调整。您仍然需要提供三种不同大小的图标，以适应ldpi，mdpi和hdpi分辨率。

这就是为什么我们需要提供三种不同的css文件。但是，实际上，如果您阅读了之前提到的文档，您可以将这三个不同的CSS写在一个文件中，如下所示：

header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

上部是mdpi，中间是hdpi，下部是ldpi。因此，您可以轻松管理这三种不同屏幕分辨率的文件。

适用于不同屏幕尺寸的Android CSS

2 个答案: