Question

我正在学习媒体查询。我正在尝试根据设备宽度给div提供不同的宽度。这是我已经完成的css

.cont
{
  margin:auto;
  width:1200px;
  background-color:maroon;
  height:80px;

}

@media all and (max-width:480px)
{
  .cont{ width:400px; background-color:yellow; }
}

@media all and (max-width:768px)
{
  .cont{ width:700px; background-color:pink; }
}

我也包含了元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这里的问题是媒体查询不适用于max-width:480。在480及更低分辨率下，它仍然显示max-width:768px的背景颜色，即粉红色。
如果我将max-width:480px查询保持在max-width:768px以下，那么480px将会起作用，而768px将会胜出。如何使两者都有效？

Answer 1

为768 @media查询添加最小宽度

演示 - http://jsfiddle.net/41x65u8d/

@media only screen and (max-width : 320px) {
    .cont {
        background:blue;
    }
}
 @media only screen and (min-width : 321px) and (max-width : 768px) {
    .cont {
        background:pink;
    }
}

css中的媒体查询不适用于不同的宽度

1 个答案: