如何在 Next.js 13.4 中正确使用 CSS 媒体查询_技术教程

本文旨在解决 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 (
    
      {children}
    
  );
}

CSS Modules (styles.module.css)： 可以在任何组件或布局文件中导入。

// app/layout.js 或 components/SomeComponent.js
import styles from './styles.module.css';
// ...
export default function RootLayout({ children }) {
  return (
    
      {children}
    
  );
}

对于 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 导出或在组件中使用  元素

export const metadata = {
  title: "My website",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    
       {/* 在 App Router 中，直接在 JSX 中使用  元素是有效的 */}
        
        
        {metadata.title}
        {/* 其他头部元素 */}
      
      {children}
    
  );
}

在 Next.js 13 的 App Router 中，

标签内的内容通常通过 layout.js 中的 metadata 对象或直接在 layout.js 中渲染元素来管理。上述代码中的元素渲染方式是有效的，它会确保 viewport meta 标签被正确注入到最终的 HTML 中。

总结

在 Next.js 项目中使用 CSS 媒体查询时，关键在于遵循标准的 CSS 语法：@media 规则必须包裹其作用的整个 CSS 块，而不是嵌套在其他选择器内部。同时，确保 viewport meta 标签的正确配置，以及样式文件的正确导入，是实现响应式设计的基石。遵循这些原则，即可有效解决媒体查询不生效的问题，并构建出在各种设备上都能良好展示的用户界面。