CSS 媒体查询是否必须在外部 CSS 文件中？答案

【问题标题】：Do CSS media queries have to be in an external CSS file?CSS 媒体查询是否必须在外部 CSS 文件中？
【发布时间】：2014-12-09 17:41:55
【问题描述】：

我见过类似的问题，但不完全是这样。

CSS 媒体查询是否必须在外部 CSS 文件中才能正常工作？

我有一个客户，我只能访问 WordPress 中的内联 css 块。他们的 IT 部门确实锁定了 CMS，而我唯一可以更改的就是通过一个名为“改进的更简单 CSS”的插件来更改 CSS，该插件在 <head> 关闭之前放置了 <style type="text/css"></style> 的内联块。

在做网站时，浏览器似乎可以接收“内联”媒体查询，响应更改浏览器的宽度，但使用 iPhone 或 iOS 模拟器，我只能获得桌面视图，我在想 iOS不喜欢 CSS 没有被外部化。

<style type="text/css">
/* Mobile-specific media query */
@media only screen and (min-width: 320px) and (max-width:767px) {

  #wrapper,
  .home #content,
  .page #container,
  .page .page, 
  #footer,
  .page #content {
    width: 100%;
  }

  #header {
    margin-top: 50px;
    margin-left: 20px;
    width: 95%;
    width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    height: 151px;
  }
}
</style>

【问题讨论】：

您所拥有的应该可以工作，所以我认为这是不包括我在回答中建议的视口元标记的问题。如果您可以访问head，请尝试添加它。
不幸的是我没有。完全锁定。
除非您有视口元标记，否则将无法工作。

标签： ios css media-queries

【解决方案1】：

不，它们不必是外部的......

MDN's docs on Media Queries 演示了设置媒体查询的两种主要方式：

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

【讨论】：

我在做后者。

【解决方案2】：

媒体查询在<style> 中完全有效，它们不必在外部样式表中。

确保您在脑海中包含视口元标记（如果您还没有）：

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

如果您包含当前拥有的 CSS，也会有所帮助。

【讨论】：

不幸的是，视口标签不在代码/主题中，我只能访问 CSS。我无法向 PHP/Markup 添加任何内容、添加 JS 等。我真的很有限。
谢谢。我将在本地实例/安装（未锁定）上加载 CSS，添加视口并确认这是问题所在。
从客户端的服务器上拉下一个副本（尽可能接近副本，通过 WordPress 的导出）。添加了视口元标记，媒体查询工作。删除它，它们不会。