安卓设备的媒体查询行为

Question

我在 phonegap/android 中工作。我必须使用 尺寸为 304 * 250 的图像。

它在 320 * 480 的屏幕尺寸和 720 * 1280 的屏幕尺寸下完美运行。

现在当我想在 240 * 320 和 480 * 800 的屏幕尺寸中检查相同的情况时？ 既看不到背景图像，也看不到数据值。

采取的补救措施：

我想用盒子阴影代替图像。我实现了它，并在 320 * 480 的屏幕尺寸下进行了测试，非常完美。

我想在 240 * 320 和 480 * 800 的屏幕尺寸下使用 Media Query

进行测试

我从here 引用并尝试实现它，但我没有成功。

@media only screen and (max-width:320px) 
{ 
.container 
{ 
width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
} 
} 
@media only screen and (max-width:480px) 
{ 
.container 
{ 
width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px; 
} 
}

这个我也加了

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

我的问题

我的 320*480 width-480 的设备采用第二个 CSS @media only screen and (max-width:480px)，但我的 240*320 width-320 的设备也采用第二个 CSS。

Answer 1

您的 320 像素宽设备实际上使用了这两个规则，但由于第二个在 CSS 中较晚，它会覆盖第一个。

所有这些都发生了，因为您基本上在第二条规则中说，所有宽度小于或等于 480 像素的设备都应该按照您的意愿行事。显然 320px 也小于 480px 所以规则适用于它。

作为您的第二条@media 规则，请使用@media only screen and (min-width: 321px) and (max-width:480px) { ... }。现在宽度小于 321px 的设备将不受第二条规则的影响。