如何让媒体查询在Next.js 13.4中生效？请排查我的配置问题

我有一个Next.js项目，其中媒体查询无法正常工作。目前我已完成以下操作：

• 在styles.module.css和global.css中添加了媒体查询，并在layout.js中导入了这些文件；
• 在Head标签下添加了viewport元标签，并将其包含在layout.js中。

以下是我当前的layout.js文件：

import "./globals.css";
import styles from "./styles.module.css";
import "./styles.module.css";
import { Inter } from "next/font/google";
import Footer from "../components/Footer";
import Head from "next/head";
import Script from "next/script";

const inter = Inter({ subsets: ["latin"] });

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

export default function RootLayout({ children }) {
  return (
    <>
      <html lang="en">
        <Head>
          <meta charset="UTF-8" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          ></meta>

          <title>My Website</title>

          <link
            rel="shortcut icon"
            type="image/x-icon"
            href="/images/favicon.ico"
          />
        </Head>
        <body className={inter.className}>{children}</body>
      </html>
    </>
  );
}

请问我是否遗漏了什么或操作有误？

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