Html CSS媒体查询层次结构-为什么'；"；较小的“；是否在浏览器/检查器中进行媒体查询渲染？

我有几个媒体查询，但有两个我正试图用来设置某个元素的样式：

.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

的媒体查询是

（最大宽度：1024px）

和

（最大宽度：768px）

这个想法是，从1024px-769px开始，我想要

.navbar default.navbar nav>li>a

获得

右边距：60px

，在768px，平板电脑大小，我想要

.navbar default.navbar nav>li>a

获得

右边距：20px

。我计划在浏览器宽度变小时继续添加媒体查询—475px、375px和320px

那么，为什么在768px时，媒体查询无法呈现？似乎1024px的媒体查询仍在获取样式并覆盖它。我不想添加

！重要的

，因为这样我将继续添加

！重要信息

一直到320px

一个问题是，我喜欢从桌面设计到移动设备，而不是首先设计移动设备。有什么建议吗？该网站位于此处：

---

谢谢

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

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

---

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

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

---

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

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

祝你好运

---

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

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

祝你好运

---

此问题有两个问题：

缺少视口定义

需要定义

min width

和

max width

以使此场景中的媒体查询正常工作

以下是一些详细说明：

媒体查询中没有基于最小/最大宽度的规则覆盖。也就是说，如果有两个媒体查询规则集，一个是

（最大宽度：1024px）

，另一个是

（最大宽度：768px）

，则不能保证

（最大宽度：768px）

内的规则将覆盖

（最大宽度：1024px）

——当两个不同媒体查询规则集中的两个规则发生冲突时，稍后出现在CSS win中的一个。这就是为什么您需要

最小宽度

和

最大宽度

来进行媒体查询

下面是一个简单的例子：虽然

（最大宽度：5000px）

是一个更合理的生效规则，但最终的背景色是粉红色

@介质（最大宽度：5000px）{
.testd{
背景：黄色；
}
}
@介质（最大宽度：100000px）{
.testd{
背景：粉红色；
}
}

---

DDD

此问题有两个问题：

缺少视口定义

需要定义

min width

和

max width

以使此场景中的媒体查询正常工作

以下是一些详细说明：

媒体查询中没有基于最小/最大宽度的规则覆盖。也就是说，如果有两个媒体查询规则集，一个是

（最大宽度：1024px）

，另一个是

（最大宽度：768px）

，则不能保证

（最大宽度：768px）

内的规则将覆盖

（最大宽度：1024px）

——当两个不同媒体查询规则集中的两个规则发生冲突时，稍后出现在CSS win中的一个。这就是为什么您需要

最小宽度

和

最大宽度

来进行媒体查询

下面是一个简单的例子：虽然

（最大宽度：5000px）

是一个更合理的生效规则，但最终的背景色是粉红色

@介质（最大宽度：5000px）{
.testd{
背景：黄色；
}
}
@介质（最大宽度：100000px）{
.testd{
背景：粉红色；
}
}

---

DDD

如果你选中/css/style.css，你会看到这就是我现在拥有的-尽管它仍然不起作用。如果你选中/css/style.css，你会看到这就是我现在拥有的-尽管它仍然不起作用。