Next.js 15自动转换@media查询为范围语法致旧浏览器兼容问题，如何禁用该转换？

嘿，这个问题我之前也踩过坑！Next.js 15 默认用 SWC 作为 CSS 编译器，它会自动把咱们写的传统媒体查询语法（比如 @media only screen and (max-width: 600px)）转换成更现代的范围语法（@media only screen and (width <= 600px)）——虽然这种新写法更简洁，但像 Safari iOS 15 这类2023年之前的旧浏览器确实不支持，就会导致媒体查询失效。

下面给你两种可行的解决方法：

方法一：通过 Next.js 配置直接禁用 SWC 的媒体查询转换 #

你可以在项目根目录的 next.config.js 文件里添加自定义的 SWC 配置，明确关闭范围语法的转换：

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  experimental: {
    swcPlugins: [
      ['@swc/css', {
        minify: {
          format: {
            mediaQuery: {
              range: false, // 关键：关闭媒体查询的范围语法转换
            },
          },
        },
      }],
    ],
  },
};

module.exports = nextConfig;

方法二：调整 PostCSS 配置（适合用了 PostCSS 的项目） #

如果你的项目依赖 PostCSS（比如搭配 Tailwind CSS 或者自定义 PostCSS 插件），可以修改根目录的 postcss.config.js，通过 postcss-preset-env 来禁用范围语法转换：

module.exports = {
  plugins: {
    'postcss-preset-env': {
      // 指定目标浏览器，确保包含 Safari iOS 15
      browsers: ['iOS >= 15', 'last 2 versions'],
      features: {
        'media-query-ranges': false, // 禁用媒体查询范围语法转换
      },
    },
    // 这里可以保留你原本的其他插件，比如 tailwindcss、autoprefixer 等
  },
};

小提示 #

• 修改完配置后，一定要重启你的 Next.js 开发服务器，新配置才会生效哦。
• 记得在 Safari iOS 15 上重新测试，确认媒体查询恢复正常工作。

内容来源于stack exchange