我正在phonegap / android中工作。我必须使用尺寸为304 * 250的图像。
它可以在320 * 480的屏幕尺寸和720 * 1280的屏幕尺寸上完美运行。
现在，当我想在240 * 320的屏幕尺寸和480 * 800的屏幕尺寸中检查相同的内容时？既不会看到背景图像，也不会看到数据值。
采取的补救措施：
我想到了使用盒子阴影而不是图像。我实现了它并在320 * 480的屏幕尺寸上对其进行了测试。
我想到了使用Media Query在屏幕尺寸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 width-480的设备使用第二个CSS
@media only screen and (max-width:480px)，但是我的240 * 320 width-320的设备也使用第二个CSS。 最佳答案
您的320像素宽度的设备实际上使用了这两个规则，但是由于第二个规则位于CSS的后面，因此它将覆盖第一个规则。
所有这些都是因为您基本上在第二条规则中说，所有宽度小于或等于480px的设备都应按您希望的方式运行。显然320px也小于480px，因此规则适用于它。
作为第二个@media规则，请使用@media only screen and (min-width: 321px) and (max-width:480px) { ... }。现在，宽度小于321px的设备将不受第二条规则的影响。
关于html - Android设备的媒体查询行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17120761/