Next JS 中的媒体查询答案

【问题标题】：Media queries in Next JSNext JS 中的媒体查询
【发布时间】：2021-08-01 09:04:28
【问题描述】：

我一直在尝试和寻找几个小时，但我找不到我的问题的解决方案。我试图在 Next JS 中为我的媒体查询断点使用不同的文件，但它们似乎什么也没做。

我在以下位置创建它们： styles/queries/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 文件中显示的部分。

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

【问题讨论】：

您好 Gonçalo，欢迎来到 StackOverflow。您提供的示例并未真正显示您如何将样式应用于任何标签/组件。请根据以下内容提供最小的可重现示例：stackoverflow.com/help/minimal-reproducible-example
嘿！我刚刚添加了我实际将样式应用于元素的方式，希望它有所帮助，并且根据最小的可重现示例。

标签： css next.js responsive

【解决方案1】：

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

一个例子说一千个单词，所以请注意下面两个例子中我如何导入 CSS 文件和如何应用类的区别。

1.标准方式：

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

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

2。 CSS 模块：

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

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

_app.js 文件中导入的 CSS 文件应该是整个应用程序的全局文件，您不应在此处使用 CSS 模块 - 使用标准 CSS。

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

【讨论】：

嘿！非常感谢您花时间实际解释这一点。我知道我正在混合使用全局方式和模块方式，这会有问题吗？我只对小东西使用全局方式，比如我们的容器和按钮等......代码的小组件。为了看看我是否理解你的解决方案，实际上为每个断点制作一个响应文件，我应该在每个页面中导入它，这样我才能真正使用模块 CSS？再次感谢您。
答案取决于您的应用程序的结构。但是，您不应该经常混淆“标准方式”和 CSS 模块，因为它可能很快就会变得难以忍受。根据经验，坚持_app.js 文件中简单、通用的样式——甚至可以尝试限制自己仅使用 CSS 标记选择器，并避免使用类选择器。其他任何事情，连同响应式设计，最好在 CSS 模块中完成。
嗯，我明白你的意思，但我只对全局属性使用“标准方式”，就像我说的那样，那里没有太多内容。然后我使用模块来分隔页面和组件，我不知道我是否正确，但我看到这是将代码分成几部分的最佳方式。我的问题是，是否可以为这样的媒体查询做单独的文件？
各位读者和版主大家好，我刚刚用@83C10 给我的建议解决了我的问题，我现在使用“标准css”作为组件的主要资源和模块。谢谢！