Next JS 中的媒体查询

2024-05-19 • 问答

我已经尝试并寻找了几个小时，但找不到解决我的问题的方法。我试图在 Next JS 中为我的媒体查询断点使用不同的文件，但它们似乎没有做任何事情。

我在以下位置创建它们：样式/查询/sizeone.css（第一个断点）

我就像这样在我的 _app.tsx 上导入它们，并且还覆盖了默认 Next JS 头的视口标签。

import { AppProps } from 'next/app';
import Head from 'next/head'

import '../styles/globals.css'
import '../styles/normalize.css'
import '../styles/queries/sizeone.css'

function App({ Component,pageProps }: AppProps) {  
  return (
    <>
    <Head>
      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    </Head>
    <Component {...pageProps} />
    </>
  )
}

export default App;

这就是我在 sizeone.css 文件中所做的，它只是一个简单的媒体查询。

@media only screen and (min-width: 1px) and (max-width: 767px){
  #hero .content .title h1 {
    text-align: center;
    color: var(--main-color);
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0;
  }
}

这就是我将样式应用于元素的方式：

            <section id={styles.hero}>
                <div classname="wrapper">
                    <div classname={styles.content}>

                        <div classname={styles.title}>
                            <h1>Creating <span classname="gradient-text">remarkable</span> <br /><span classname="gradient-text">experiences</span> through digital art.</h1>
                            <p>Freelancing UI/UX design & Front-end development</p>

这是 sizeone.css 文件中显示的部分。

感谢您花时间阅读我的问题，希望我们能找到解决方案:)

基本上，您混淆了两种分配 CSS 类的方式：标准方式和CSS 模块方式。您可能想在以下位置阅读有关此主题的更多信息：CSS Tricks: CSS Modules

一个例子讲了一千个字，所以请注意我在下面两个例子中导入 CSS 文件的方式和我应用类的方式的不同。

1.标准方式：

import '../styles/globals.css';
export default function App() {
  return <p className="big">Standard big</p>;
}

/* heading.module.css */
.big {
  font-size: 20px;
}

2. CSS 模块：

import styles from './heading.module.css';
export default function Heading() {
  return <p className={styles.big}>CSS Modules big</p>;
}

_app.js

在 {{1}} 文件中导入的 CSS 文件应该对整个应用程序是全局的，并且您不应在此处使用 CSS 模块 - 使用标准 CSS。

任何其他特定于特定组件的样式都应该导入到相应组件的 JS/TS 文件中，在 Next.js 中执行此操作的首选方法是使用 CSS 模块。

Next JS 中的媒体查询

starguping66896605 回答：Next JS 中的媒体查询

大家都在问