本文旨在解决 next.js 13.4 项目中媒体查询不生效的问题。核心在于纠正媒体查询的语法结构，确保 `@media` 规则直接包裹样式定义，而非嵌套在其他 css 规则内部。通过明确的示例代码，本文将指导开发者正确配置和应用响应式样式，确保在不同屏幕尺寸下布局和元素的预期行为。
在 Next.js 应用程序中实现响应式设计，媒体查询是不可或缺的工具。然而，开发者有时会遇到媒体查询不生效的问题，尤其是在使用 CSS Modules 或全局 CSS 时。这通常不是 Next.js 本身的问题，而是 CSS 媒体查询语法使用不当所致。
媒体查询不生效的常见原因与解决方案
媒体查询的核心是根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式。一个常见的错误是将 @media 规则错误地嵌套在另一个 CSS 规则内部。这会导致媒体查询无法被浏览器正确解析和应用。
错误示例：
以下代码展示了一种常见的错误用法，即尝试将 @media 规则嵌套在 .burgerBtn 类的定义内部。这种写法在大多数 CSS 解析器中是无效的。
立即学习“前端免费学习笔记（深入）”；
/* styles.module.css 或 global.css */
.burgerBtn {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
width: 22px;
/* 错误：@media 规则不应嵌套在其他选择器内部 */
@media (max-width: 1100px) {
display: flex;
}
}在这种情况下，即使在 layout.js 或其他组件中正确导入了样式文件，并且设置了 viewport meta 标签，媒体查询仍然不会生效，因为其语法结构不符合 CSS 规范。
正确解决方案：
要使媒体查询生效，@media 规则必须直接作用于其内部的 CSS 规则，而不是作为某个选择器属性的子属性。这意味着 @media 块应该包裹完整的选择器及其样式声明。
/* styles.module.css 或 global.css */
.burgerBtn {
display: none; /* 默认情况下隐藏 */
flex-direction: column;
gap: 4px;
background: none;
border: none;
width: 22px;
}
/* 正确：@media 规则直接包裹选择器和其样式 */
@media (max-width: 1100px) {
.burgerBtn {
display: flex; /* 在屏幕宽度小于等于 1100px 时显示 */
}
}通过将 @media (max-width: 1100px) 规则放在 .burgerBtn 样式定义之外，并让它包裹 .burgerBtn 在特定条件下应应用的样式，浏览器就能正确解析并根据屏幕宽度切换 display 属性。
Next.js 中的样式导入与配置
在 Next.js 项目中，确保样式文件被正确导入是基础。
-
全局 CSS (globals.css)： 通常在 app/layout.js 或 pages/_app.js (如果是 Pages Router) 中导入。
// app/layout.js (App Router) import './globals.css'; // ... export default function RootLayout({ children }) { return ( <html lang="en"> <body>{children}</body> </html> ); } -
CSS Modules (styles.module.css)： 可以在任何组件或布局文件中导入。
// app/layout.js 或 components/SomeComponent.js import styles from './styles.module.css'; // ... export default function RootLayout({ children }) { return ( <html lang="en"> <body className={styles.someClassName}>{children}</body> </html> ); }对于 CSS Modules，媒体查询的正确写法与全局 CSS 相同，都要求 @media 规则在外层。
确保 Viewport Meta 标签的存在
为了使媒体查询在移动设备上正常工作，必须在 HTML 的
部分包含一个 viewport meta 标签。这个标签告诉浏览器如何控制页面的缩放和尺寸。// app/layout.js
import Head from 'next/head'; // 在 Next.js 13+ 的 App Router 中，通常不再直接使用 next/head，而是通过 layout.js 中的 metadata 导出或在组件中使用 <head> 元素
export const metadata = {
title: "My website",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head> {/* 在 App Router 中，直接在 JSX 中使用 <head> 元素是有效的 */}
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{metadata.title}</title>
{/* 其他头部元素 */}
</head>
<body>{children}</body>
</html>
);
}在 Next.js 13 的 App Router 中，
标签内的内容通常通过 layout.js 中的 metadata 对象或直接在 layout.js 中渲染 元素来管理。上述代码中的 元素渲染方式是有效的，它会确保 viewport meta 标签被正确注入到最终的 HTML 中。总结
在 Next.js 项目中使用 CSS 媒体查询时，关键在于遵循标准的 CSS 语法：@media 规则必须包裹其作用的整个 CSS 块，而不是嵌套在其他选择器内部。同时，确保 viewport meta 标签的正确配置，以及样式文件的正确导入，是实现响应式设计的基石。遵循这些原则，即可有效解决媒体查询不生效的问题，并构建出在各种设备上都能良好展示的用户界面。
