CSS 媒体查询层次结构 - 为什么“较小”的媒体查询不在浏览器/检查器中呈现？

Question

我有几个媒体查询，但我尝试使用其中两个来设置某个元素的样式：

.navbar-default .navbar-nav>li>a

这是我的 CSS，包括以前的媒体查询：

@media (min-width: 1024px) {

     .header-column-secondary {
    width: 13%;
    }
}

@media (min-width: 768px) {

    #gatewaylogo {
    height: 85px;
    padding-left: 0px;
    padding-top: 10px;
    }

    .phone-number {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: 16px;
    position: relative;
    }

    .social-media {
    color: #ffffff;
    display: table-cell;
    padding: 5px 0 5px 5px;
    transform: translateY(-7%);
    }
}

@media screen and (max-width: 1024px) {
    .navbar-default .navbar-nav>li>a 
    {
    font-family: 'Oswald', sans-serif;
    color: #1B3764;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 100px;
    margin-right: 60px;
    padding-left: 0;
    padding-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .navbar-default .navbar-nav>li>a {
    font-family: 'Oswald', sans-serif;
    color: #1B3764;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 100px;
    margin-right: 20px;
    padding-left: 0;
    padding-right: 0;
    }
 }

您可以看到应用于.navbar-default .navbar-nav>li>a 的媒体查询是(max-width: 1024px) 和(max-width: 768px)

这个想法是，从 1024 像素到 769 像素，我希望 .navbar-default .navbar-nav>li>a 得到 margin-right: 60px，并且在 768 像素，平板电脑大小时，我希望 .navbar-default .navbar-nav>li>a 得到 margin-right: 20px。随着浏览器宽度变小（475px、375px 和 320px），我计划继续添加媒体查询。

那么为什么在 768px 时，媒体查询没有呈现？似乎 1024px 的媒体查询仍在获取样式并覆盖它。我不想添加!importants，因为那样我将继续添加!importants，一直到320px。

一个问题是我喜欢从桌面设计到移动设备——而不是移动设备。有什么建议？该网站在这里直播：http://nowordpress.gatewaywebdesign.com/

谢谢

Answer 1

这个问题有2个问题：

1. 缺少视口定义
2. 需要同时定义 min-width 和 max-width 才能使此场景中的媒体查询正常工作。

这里有一些详细的解释：

媒体查询中没有rule_override_based_on_min/max_width。也就是说，如果有 2 个媒体查询规则集，一个是 (max-width: 1024px)，另一个是 (max-width: 768px)，则不能保证 (max-width: 768px) 内的规则将覆盖 (max-width: 1024px) 内的规则 -- 当两个规则之间发生冲突时在 2 个不同的媒体查询规则集内，后来出现在 CSS win 中的那个。这就是为什么您需要min-width 和max-width 来进行媒体查询。

这里是一个简单的例子：虽然(max-width: 5000px)是更合理的规则生效，但最终的背景颜色是粉红色。

@media (max-width: 5000px) {
    .testd {
      background: yellow;
    }
}

@media (max-width: 100000px) {
    .testd {
      background: pink;
    }
}

<div class="testd">DDD</div>

David 是正确的，缺少视口定义。没有它，由于像素比，媒体查询是不可能的。

Answer 2

您的页面头部缺少视口元标记，请添加如下内容：

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

祝你好运！

Answer 3

我认为您需要这样的媒体查询：

@media (min-width: 768px) and (max-width: 1024px)