媒体查询似乎不起作用？答案

【问题标题】：media queries not seem to be working?媒体查询似乎不起作用？
【发布时间】：2016-12-22 02:17:53
【问题描述】：

我确定我在这里可能做错了什么，但我的媒体查询似乎不适用于我正在开发的这个新的主要基于引导程序的网站。

在我的 HTML 工作表中，我放置了 head 标签：

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

然后在我的 CSS 上我有这样的东西：

移动 CSS

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  h1 {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    color: #000000;
    font-size: 6.5vw;
    letter-spacing: 0.50em;
    margin-left: 3%;
  }
  h2 {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    color: #000000;
    font-size: 1.5vw;
    letter-spacing: 0.25em;
  }
}

任何帮助将不胜感激，谢谢！

【问题讨论】：

首先我会检查以确保您正在编辑的 css 文件是插入页面头部的最后一个 css 文件。如果它下面还有其他人，它们可能会覆盖您的更改。
同意@MichaelMcCoy。当屏幕尺寸在 320px 和 480px 之间时，这些样式应该应用于所有 h1 和 h2 标签。如果没有，还有其他 css 会覆盖这些样式。另外，请确保您的其他样式未在您的 css 中使用 !important 声明。
您是否在移动设备/设备模拟器上对此进行了测试，否则您将看不到任何更改。以防万一，请参阅stackoverflow.com/questions/6747242/…。
@MichaelMcCoy 感谢您的反馈，但似乎我的代码中没有插入任何其他 css 文件......所以这确实很奇怪，我还没有完全弄清楚如何完成这项工作...我过去使用过媒体查询，而这从未发生过。

标签： css twitter-bootstrap responsive-design media

【解决方案1】：

这样写

@media (min-width: 320px) and (max-width: 480px)

【讨论】：