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)

我的想法是，从1024px - 769px，我希望.navbar-default .navbar-nav>li>a得到margin-right: 60px，而平板电脑尺寸为768px，我希望.navbar-default .navbar-nav>li>a得到margin-right: 20px。我计划继续添加媒体查询，因为浏览器宽度变小 - 475px，375px和320px。

那么为什么在768px时，媒体查询无法呈现？似乎1024px的媒体查询仍然是风格并覆盖它。我不想添加!importants，因为我将继续将!importants一直添加到320px。

问题是我喜欢从桌面设计到移动设备 - 首先不是移动设备。有什么建议？该网站现已上线：http://nowordpress.gatewaywebdesign.com/

由于

Answer 1

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

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

祝你好运！

Answer 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个不同的媒体查询规则集中的2个规则之间发生冲突时，后者出现在CSS中。这就是为什么您需要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>

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

Answer 3

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

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

CSS媒体查询层次结构 - 为什么没有＆＃34;＃34;更小＆＃34;媒体查询在浏览器/检查器中渲染？

3 个答案: