主页 / coding / 问题 / 78356676
Accepted
bascott
Asked: 2024-04-20 08:49:56 +0800 CST

如何在 Next.js 全局 CSS 和 Tailwind 中使用媒体查询？

  • 772

我试图在文件中使用媒体查询来globals.css调整 CSS 以适应不同的屏幕尺寸，但媒体查询中的样式没有得到反映。当我使用 Tailwind 的内联样式时它可以工作，但我希望这些更改适用于特定标签，因为我使用的是 markdown。无论我在 Tailwind 和 Next.js 的文档页面上查看何处，我似乎都无法在两者之间找到任何独特的规则来阻止我的媒体查询按照我想要的方式工作。如何global.css在启用了 Tailwind 的情况下在 Next.js 文件中使用媒体查询？

全局变量.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: white;
    margin: 50px 0px;
    overflow-x: hidden;
}

@media screen and (max-width: 500) {
    body {
        background-color: black;
        margin: 50px 0px;
        overflow-x: hidden;
    }
}
html

1 个回答

  1. Best Answer

    您可能缺少媒体查询选择器的单位，请尝试将其更改500px为500：

    @media screen and (max-width: 500px) {
    body {
        background-color: black;
        margin: 50px 0px;
        overflow-x: hidden;
    }
}

    您可以在 MDN 文档中了解有关媒体查询和单元的更多信息。

    • 1

相关问题