Question

嘿伙计们我正在尝试为我的网站创建一个响应式布局。我正在使用媒体查询来设置我的2个导航栏的宽度：左和右。

我有点困惑，因为相同的语法适用于simetimes，并且在某些宽度上它不起作用。

例如：

@media (max-width:1000px)
{
  .left{width:50%}
  .right{width:50%}
}

工作正常，但当我这样做时：

@media (max-width: 720px) 
{
  .left{width:25%}
  .right{width:25%}
}

它仍然需要第一个声明？显示宽度可以低于100像素，它仍然是第一个媒体查询。

Answer 1

如果没有看到具体的示例，这应该有效，但您应该知道媒体查询的顺序非常重要。

更正订单（使用max-width时：

@media screen and (max-width:1000px) {
    .left {
        width:50%;
    }
    .right {
        width:50%;
    }
}
@media screen and (max-width: 720px) {
    .left {
        width:25%;
    }
    .right {
        width:25%;
    }
}

JSfiddle Demo

订单不正确（使用最大宽度时）：JSfiddle Demo

媒体查询不接受另一个

1 个答案: