How to make media queries work in Next.js 13.4?

小能豆

How to make media queries work in Next.js 13.4?

javascript

I have a next.js project where the media queries don’t work. This is what I have done so far:

I have added my queries in “styles.module.css” and “global.css” and imported these in layout.js
I have added the viewport meta tag under a Head tag and included this in layout.js

This is my current layout.js file:

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>
    </>
  );
}

Is there anything I’m missing and/or doing wrong?

阅读 75

2023-12-02

共1个答案

小能豆

Your approach seems correct for setting up global styles and media queries in a Next.js project. However, there are a few points to check and consider:

CSS Modules:
Ensure that your CSS files (e.g., “styles.module.css” and “global.css”) are correctly configured as CSS Modules. In Next.js, files ending with .module.css are treated as CSS Modules by default.
Class Name Usage:
Ensure that you are using the generated class names correctly in your components. In your example, you have {inter.className} in the body tag. Make sure this class is applied to the correct elements in your styles.
Media Queries in CSS:
Double-check your media queries in “styles.module.css” to ensure they are well-formed and target the intended screen sizes. For example:

@media (max-width: 600px) { /* Your styles for small screens */ }
Order of Stylesheets:
Check the order in which you import your stylesheets. Stylesheets are processed in the order they are imported. If there are conflicting styles, the ones imported later may override the earlier ones.
Browserslist Configuration:
Make sure your project has a valid browserslist configuration in your package.json file. This configuration is used by Autoprefixer, and it helps in adding necessary prefixes for certain CSS properties based on the specified browser support.

Example browserslist configuration:

"browserslist": { "production": [">0.2%", "not dead", "not op_mini all"], "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"] }

Inspecting Styles:
Use browser developer tools to inspect the rendered HTML and verify that the styles and media queries are being applied as expected. This can help identify if there are any issues with class names or conflicting styles.
Browser Cache:
Clear your browser cache to ensure that you are loading the latest styles from your project.
Viewport Meta Tag:
While you have the viewport meta tag in your Head, it’s worth double-checking if it’s being overridden by any other layout or component.

After checking these points, you should have a better understanding of whether the issue lies in the configuration, styling, or elsewhere. If the problem persists, consider providing more details about your styles and how you are using them in components for further assistance.

2023-12-02