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

问题描述：

我有一个简单的网页，显示一些文本和图像，并试图找到处理多个屏幕的非复杂方式。适用于不同屏幕尺寸的Android CSS

我已经浏览了the docs，我现在看到要做的唯一方法是创建三个独立的css文件，一个用于低位，一个用于中型，另一个用于高分辨率。不幸的是，其中的每一个必须具有不同的字体大小和每个元素/图像的尺寸。

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

我失去了一些东西在这里？

答

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

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

退房这篇文章Responsive Web Design

希望这是哪门子的信息你是后？

我们最终走向了一个不需要这个方向的方向，但我会将其标记为答案，因为它可能对另一种情况有所帮助。谢谢。 – cottonBallPaws 2011-03-07 23:35:48

答

我刚才看到了同样的问题。那么，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，中间一个是华电国际，和下部是ldpi。因此，您可以轻松管理这三种不同屏幕分辨率的一个文件。

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

相关推荐