Question

我正在使用phonegap / android。我不得不使用尺寸为304 * 250的图像。

完美的屏幕尺寸为320 * 480，屏幕尺寸为720 * 1280。

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

采取补救措施：

我想过用一个方框而不是图像。我实现了它，并在320 * 480的屏幕尺寸上进行了测试。它非常完美。

我考虑使用媒体查询

在240 * 320的屏幕尺寸和480 * 800的屏幕尺寸上测试相同的内容

我从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宽度480的设备需要第二个CSS @media only screen and (max-width:480px)，但我的240 * 320宽度为320的设备也需要第二个CSS。

Answer 1

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

所有这一切都是因为您基本上在第二条规则中说，宽度小于或等于480px的所有设备都应该按照您的需要运行。显然320px也小于480px所以规则适用于它。

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

Android设备的媒体查询行为

1 个答案: