CSS 媒体查询是响应式网页设计的组成部分之一。WordPress 开发人员使用媒体查询技术来确保网站在所有设备和屏幕尺寸上都能发挥最佳功能。如果这种 CSS 技术的运行出现问题，就会导致 "媒体查询在 WordPress 中不起作用 "的错误信息。
修复 "媒体查询在 WordPress 中不起作用 "错误对于确保所有人都能访问您的网站（无论屏幕类型和大小）至关重要。下面我们提供了一些修复 "媒体查询在 WordPress 中不起作用 "错误的技巧。但在此之前，我们先简要解释一下 CSS 媒体查询。
什么是 CSS 媒体查询？
作为 CSS（层叠样式表）的功能之一，媒体查询能让开发人员根据设定条件应用不同的 CSS 规则。它可以帮助开发人员根据设备类型或浏览器视口大小创建不同的设计布局。媒体查询可以在单独的 .CSS 文件中使用，也可以在网页的HTML 中插入。
它是 W3C 推荐的响应式网页设计标准。此外，它还能确保呈现的内容适应不同的条件，如屏幕分辨率、浏览器宽度和设备类型。
CSS 媒体查询的使用
确保用户在浏览网站时获得更好的体验是提高网站搜索结果排名的因素之一，而 CSS 媒体查询可以在这方面提供帮助。
媒体查询有助于在所有设备、屏幕尺寸和分辨率上定制网页的外观。它提供具体的指令，告诉浏览器在移动、桌面或其他设备上浏览网页时如何呈现。
通过使用 CSS 媒体查询，开发人员可以创建可在所有设备上访问和阅读的网站，而无需创建单独的移动网站。
下面是一个媒体查询示例：
@media screen and (max-width: 480px){header { height: 70px; }article { font-size: 14px; }img { max-width: 480px; }}媒体查询用于
- 使用 CSS @media 和 @import 规则应用条件样式。
- 在移动设备上以纵向模式浏览页面时，将边栏移至网站内容下方。
- Targeting specific media <style>, <source>, and other HTML elements with the media= attribute.
- 根据设备屏幕尺寸调整栏宽。
- 将移动设备上的布局从双栏布局改为单栏布局。
媒体查询语法
媒体查询由以下四个元素组成。了解语法后，就能正确使用媒体查询。
@ 媒体规则
该元素有助于声明（指定）在 CSS 中设置媒体查询的意图。输入 @media，中间不留空格。
媒体类型
媒体类型是指使用媒体查询的设备类型。它包括以下规则：
- 全部：适用于所有设备，如果未指定介质类型，则使用 "全部"。
- 语音：这种媒体类型适用于（或用于）屏幕阅读器。
- 打印：如果页面材料或文档处于打印预览模式，则应用 "打印 "介质类型。该介质类型用于打印机。
- 屏幕：此 CSS 规则适用于智能手机、台式机、平板电脑等屏幕。
媒体特色
媒体特性元素用于添加具体细节。所有媒体特性表达式都放在括号内，例如最大宽度为 400px（移动设备）。这里，最大宽度媒体特性用于移动设备。
其他媒体功能及其作用如下：
- 宽度：指视口宽度。
- 最大宽度：定义浏览器窗口的 "最大宽度"。
- 高度：这指的是视口高度。
- 最大高度定义浏览器窗口的 "最大高度"。
- 最小高度定义浏览器窗口的 "最小高度"。
- 方向：这指的是视口方向。(横向或纵向模式）。
逻辑运算符
逻辑运算符有助于组成复杂的媒体查询，包括 not、and 和 only 元素。还可以使用逗号将一个或多个媒体查询组合成一条规则。
- 非：如果使用 "非操作符"，则需要指定媒体类型。通常情况下，"非操作符 "会否定媒体查询。
- 和：使用 "和 "运算符可将两个或多个媒体特征合并为一个媒体查询。该操作符还有助于将媒体类型与媒体特征连接起来。
- 唯一：only操作符 "对旧版本的浏览器至关重要。它有助于旧版浏览器正确理解媒体查询，从而避免出现 "媒体查询在 WordPress 中不起作用 "的错误。此外，使用 "not 运算符 "时，请指定媒体类型。
- , （逗号）：该操作符用于将多个媒体查询合并为一条规则。当使用逗号分隔多个查询时，每个查询都会单独处理。另外，如果查询列表为真，则整个媒体查询列表仍然为真。
修复媒体查询在 WordPress 中不起作用的技巧
CSS 媒体查询会因多种原因导致错误。有时，媒体查询可能在移动设备上有效，但在台式机上无效。有时，它可能在所有设备上都不起作用。要检查网站的媒体查询，请使用浏览器的开发工具检查网站的 CSS。点击 "样式选项卡"，查看应用于相关元素（语法）的样式。
大多数情况下，"媒体查询在 WordPress 中不起作用 "的原因很常见。因此，这里有几种修复此错误的方法。
检查内联 CSS 声明
如果您在 HTML 文档中声明了 CSS，可能会导致 "媒体查询在 WordPress 中不起作用 "的错误。您可以从 HTML 文档中移除 "CSS 内联声明 "来解决这个问题。
另一种方法是用!important 覆盖此声明。例如，要在移动设备上将段落的文字颜色改为 "灰色"，请使用以下几行 CSS。
@media screen and (max-width: 1024px){ p{ color: gray; }}不过，有时由于同一元素上应用了内联样式，这可能不起作用。在这种情况下，可以使用!important 规则覆盖内联样式，从而解决问题。
@media screen and (max-width: 1024px){ p{ color: gray !important; }}正确定位媒体查询
媒体查询在 WordPress 中不起作用 "错误的另一个原因是媒体查询的位置不正确。要解决这个问题，请在样式表的末尾添加媒体查询。
由于浏览器是自上而下读取样式表的，因此样式表末尾提到的代码可以覆盖开头的声明（使用 !important 时除外）。此外，对于小型查询，应将媒体查询放在大屏幕之前。
看看这个例子
body {background-color: black;}@media screen and (min-width: 480px) {body {background-color: blue;}}@media screen and (min-width: 850px) {body {background-color: light blue;text-align: center;}}- 在第一条规则中，如果屏幕小于 480px，背景颜色为 "黑色"。
- 在第二个媒体查询中，如果屏幕尺寸在 480 至 849px 之间，背景颜色就是 "蓝色"。
- 最后，如果屏幕尺寸为 580px 或更大，背景颜色将为 "浅蓝色"，居中对齐。
台式机与手机
一旦设置了媒体查询，它在台式机和手机上都应该能以最佳状态运行。但是，如果在两者中的任何一个上出现错误，请使用以下提示解决问题。
媒体查询无法在桌面上运行
如果您使用了媒体特性 "max-device-width "而不是 "max-width"，可能会导致媒体查询在桌面上不起作用的错误。在这里，"max-width "指的是设备显示区域的大小，而 "max-device-width "指的是设备（移动设备）的屏幕大小。
要修复这个 "媒体查询在桌面上不起作用 "的错误，请将媒体功能改为 "最大宽度"。这指定的是浏览器的显示区域，而不是设备的实际屏幕尺寸。
媒体查询无法在移动设备上运行
Likewise, if you have not set the viewport and default zoom, it could lead to the issue of media queries not working on mobile devices. To fix this, simply add the following code to your site’s header. Ensure that these lines of code are added within the <head> </head> element.
<meta name="viewport" content="width=device-width, initial-scale=1"/>这里的 "宽度 "是视口尺寸，设置为设备宽度。它指示浏览器渲染网站，使其自然地适应屏幕。而 "initial-scale "则定义了缩放级别。
阅读：如何避免使用 CSS @import 来提高页面加载速度
结论
确保所有人都能访问您的网站，无论其设备类型如何，这一点非常重要。响应式网站设计可以帮助您从不同来源获取流量。随着谷歌移动优先索引的推出，它还能加快网页的索引速度。此外，它还能为在移动设备上浏览网站的用户提供更好的体验，从而提高网站的排名。
只要找出原因，修复 "媒体查询在 WordPress 中不起作用 "错误的方法就很简单。您可以按照上述提示进行必要的更改。
为了避免再次出现 "媒体查询在 WordPress 中不起作用 "的错误，请使用Simple Custom CSS和WP Add Custom CSS等插件为网站添加媒体查询。
此外，如果您无法解决 "媒体查询在 WordPress 中不起作用 "的错误，请与我们联系。我们是一家WordPress 代理公司，可以帮助企业修复网站上常见的 WordPress 错误，而不会造成任何停机。
