我需要使用一张尺寸为304*250的图片。
在屏幕大小为320*480和720*1280时,它能够完美地工作。
但是当我想在屏幕大小为240*320和480*800上查看时,既没有背景图片也没有数据值。
解决步骤:
我考虑使用盒子阴影代替图片。我实施了它并在屏幕大小为320*480上进行了测试,效果很好。
我想在屏幕大小为240*320和480*800上测试相同的内容,使用媒体查询。
我参考了这里,并尝试实施,但不成功。
我的正常CSS:
.container
{
width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px;
}
我的媒体查询 CSS
@media only screen and (max-device-width: 240px)
{
.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; ;
}
}
我已按以下方式调用了CSS。
<link rel="stylesheet" type="text/css" href="css/common_set.css" />
问题: 它没有被实现。我看不到那个框,只有一个空白屏幕。
它无法访问上述提到的媒体查询CSS。
尝试过的解决方案:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
请问我的实现有什么错误吗?求帮忙!!
为了澄清,如果我已经理解了答案中的第一个要点
.name_layer
{
float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px;
}
.name_layer_text
{
margin-left:1%;
}
.swipe_body
{
padding:0; margin:0; width:100%; height:480px;
}
.container
{
width:200px; height:10px; 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: 240px)
{
.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; ;
}
}
这样正确吗?但我的输出结果是根据容器CSS而来的...我在设备上测试它,而不是在浏览器上。
编辑:2
@media only screen and (max-width:240px)
{
.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 (min-width:240px)
{
.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;
}
}
这是一个更小的设备,并采用第二个CSS属性- min-width: 240px