为什么我的媒体查询不适用？

Question

编辑添加，所以没有其他人将此作为答案发布：我的代码中已经有一个视口标签。

我在这里阅读了很多对类似问题的回复，我确信我的问题可能出在我的查询声明顺序中的某个地方，但我终究无法弄清楚在哪里.

我有两个 div，一个应该在宽布局中显示，一个应该在窄布局中显示。

<!-- for small layouts -->
<div class="container-fluid slogan text-center" id="home-slogan-container-small">
   small
</div>

<!-- for 800 px and wider -->
<div class="container-fluid slogan text-center" id="home-slogan-container-large">
   large
</div>

（这些非常精简；实际内容在 div 中有不同的布局。）

我遇到的问题是，无论我将浏览器缩放到什么大小（在 FF 中使用 ctrl-shift-m 获取移动视图进行测试，在 Chrome 中使用移动视图按钮进行测试在开发工具中），小布局显示。

这是我的 css：

#home-slogan-container-small {
    padding-top: 15px;
    text-align: center !important;
    display: none;
}

#home-slogan-container-large {
    padding-top: 15px;
    text-align: center !important;
    display: none;
}


@media only screen and (max-width: 1500px) {
        #home-slogan-container-small { display: none !important;}
        #home-slogan-container-large { display: block !important;}
}

@media only screen and (max-width: 1200px) {
    #home-slogan-container-small { display: none !important;}
    #home-slogan-container-large { display: block !important;}
}


@media only screen and (max-width: 960px) {
    #home-slogan-container-small { display: none !important;}
    #home-slogan-container-large { display: block !important;}
}

@media only screen and (max-width: 800px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}


@media only screen and (max-width: 799px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

@media only screen and (max-width: 420px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

@media only screen and (min-width: 300px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

我是一名 PHP/mySQL 开发人员，有一个 bootstrap 网站落在我身上； CSS 不是我的强项。任何解释将不胜感激。

Answer 1

问题来了

@media only screen and (min-width: 300px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

它是 min-width... 意味着任何宽度大于该宽度的东西（例如所有浏览器）都将具有这些属性。改成max-width就可以了

编辑：以下所有内容都是正确的，但不是@EmmyS 问题的原因。解决方法如上

我最近遇到了 Foundation 的这个问题，我怀疑 bootstrap 也有这个问题。您的 html 可能缺少元声明：

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

将其添加到您的 HTML 的头部，它可能会正常工作。您遇到此问题的原因是移动浏览器正在决定 "okay, I don't know how to display this website, so I'm going to scale it as if I was a large browser, even though I'm not."

Answer 2

你必须删除最后一个媒体查询

@media only screen and (min-width: 300px) {
   #home-slogan-container-small { display: block !important;}
   #home-slogan-container-large { display: none !important;}
}

原因是，这最后一个是唯一具有最小宽度规则并否决了之前的所有规则（wieport < 300px 的情况除外）

Answer 3

像这样重写所有样式：

/* Styles for size 0px - 799px */
.small {
  display: block;
}

.middle {
  display: none;
}

.large {
  display: none;
}

/* Styles for size 800px - 1200px */
@media (min-width: 800px) {
  .small {
    display: none;
  }

  .middle {
    display: block;
  }

  .large {
    display: none;
  }
}


/* Styles for size 1200px and more */
@media (min-width: 1200px) {
  .small {
    display: none;
  }

  .middle {
    display: none;
  }

  .large {
    display: block;
  }
}

我选择了800px和1200px作为断点。您可以修改它们或添加新的。

为什么我的媒体查询不适用？

Why are my media queries not applying?

html

css

php

media-queries