0

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

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

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

采取的补救措施：

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

我想在 240 * 320 的屏幕尺寸和 480 * 800 的屏幕尺寸中使用Media Query进行测试

我从这里引用并尝试实施它，但我没有成功。

@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@media only screen and (max-width:480px)设备采用 2nd CSS ，但我的 240*320 width-320 设备也采用 2nd CSS 。

4

1 回答 1

1

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

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

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

于 2013-06-15T09:40:28.263 回答