我必须使用大小为 304 * 250 的图像。
它在 320 * 480 的屏幕尺寸和 720 * 1280 的屏幕尺寸下完美运行。
现在当我想在 240 * 320 和 480 * 800 的屏幕尺寸中检查相同的情况时?既看不到背景图像,也看不到数据值。
采取的补救措施:
我想用盒子阴影代替图像。我实现了它并在 320 * 480 的屏幕尺寸下对其进行了测试。非常完美。
我想在 240 * 320 的屏幕尺寸和 480 * 800 的屏幕尺寸中使用Media Query进行测试
我从这里引用并尝试实施它,但我没有成功。
我的普通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