如何在Next.js中按屏幕尺寸媒体查询加载不同CSS文件

你希望通过拆分CSS文件实现移动端优先的按需加载，减少未使用CSS体积，同时替代手动编写带媒体查询的<link>标签。以下是Next.js中推荐的两种实现方式：

方法1：CSS原生@import配合媒体查询（推荐） #

利用浏览器原生的媒体查询驱动加载机制，在核心移动端CSS中导入其他断点的样式文件，浏览器会自动根据当前屏幕尺寸加载符合条件的CSS，且不会阻塞页面初始渲染。

实现步骤： #

1. 按规则创建拆分后的CSS文件：

   • styles/mobile.css：核心基础样式（对应min-width: 0px）
   • styles/tablet.css：平板端需修改的样式（对应min-width: 600px）
   • styles/desktop.css：桌面端需修改的样式（对应min-width: 1024px）
   • styles/widescreen.css：宽屏端需修改的样式（对应min-width: 1280px）

2. 在核心的mobile.css中添加带媒体查询的@import语句：

/* styles/mobile.css */
/* 核心移动端基础样式 */
body {
  color: #333;
  padding: 1rem;
  font-size: 16px;
}

/* 按需导入对应断点的样式文件 */
@import url('./tablet.css') screen and (min-width: 600px);
@import url('./desktop.css') screen and (min-width: 1024px);
@import url('./widescreen.css') screen and (min-width: 1280px);

3. 在Next.js的全局布局文件中导入核心mobile.css：

// pages/_app.js（Pages Router）或 app/layout.js（App Router）
import '../styles/mobile.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

这种方式完全遵循浏览器规范，无需额外JS逻辑，移动端只会加载核心CSS，更大屏幕尺寸才会触发对应断点文件的加载，最大化优化加载速度。

方法2：客户端动态加载（适合复杂场景） #

如果需要更灵活的控制（比如结合自定义断点逻辑、用户交互触发加载），可以通过客户端检测屏幕尺寸动态导入CSS文件：

实现步骤： #

1. 创建自定义Hook处理动态加载逻辑：

// hooks/useMediaQuery.js
import { useEffect } from 'react';

export default function useMediaQuery() {
  useEffect(() => {
    const loadCSS = (mediaQuery, cssPath) => {
      if (window.matchMedia(mediaQuery).matches) {
        // 动态导入对应CSS文件，Next.js会自动打包为独立chunk
        import(`../styles/${cssPath}`);
      }
    };

    // 初始加载匹配当前屏幕的CSS
    loadCSS('(min-width: 600px)', 'tablet.css');
    loadCSS('(min-width: 1024px)', 'desktop.css');
    loadCSS('(min-width: 1280px)', 'widescreen.css');

    // 监听屏幕尺寸变化，按需加载/切换CSS
    const handleResize = () => {
      loadCSS('(min-width: 600px)', 'tablet.css');
      loadCSS('(min-width: 1024px)', 'desktop.css');
      loadCSS('(min-width: 1280px)', 'widescreen.css');
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
}

2. 在全局布局文件中导入核心CSS并使用该Hook：

// pages/_app.js（Pages Router）或 app/layout.js（App Router）
import '../styles/mobile.css';
import useMediaQuery from '../hooks/useMediaQuery';

function MyApp({ Component, pageProps }) {
  useMediaQuery();
  return <Component {...pageProps} />;
}

export default MyApp;

动态导入的CSS会被Next.js打包为独立代码块，浏览器会在满足条件时异步加载，避免阻塞初始渲染。

关键注意事项 #

• 坚持移动端优先原则：核心样式放在最小断点文件中，大断点仅覆盖需要修改的样式，避免代码冗余。
• 避免在多文件中重复定义相同选择器，除非是明确的覆盖逻辑，降低维护成本。
• 若使用Next.js 13+ App Router，需确保全局CSS仅在根布局文件中导入，符合App Router的CSS加载规则。

内容的提问来源于stack exchange，提问作者Pandofla