在 Next.js 项目中，可通过标准 CSS 媒体查询直接写入 globals.css 实现响应式样式；关键在于媒体查询值必须带单位（如 500px），否则无效。此方式适用于需全局控制 HTML 标签（如 、、）样式的场景，尤其适合 Markdown 渲染内容的响应式适配。
在 next.js 项目中，可通过标准 css 媒体查询直接写入 `globals.css` 实现响应式样式；关键在于媒体查询值必须带单位（如 `500px`），否则无效。此方式适用于需全局控制 html 标签（如 `
`、``、`
`）样式的场景，尤其适合 markdown 渲染内容的响应式适配。
Next.js 本身对 CSS 媒体查询无特殊限制，其 globals.css 文件经 PostCSS（含 Tailwind 插件）处理后，会正常解析并注入样式表。你遇到的问题——媒体查询未生效——几乎总是源于语法错误：CSS 媒体特性值必须包含单位。例如 (max-width: 500) 是非法的，浏览器会直接忽略整个媒体查询块；而 (max-width: 500px) 才是有效声明。
✅ 正确写法（带单位）：
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: white;
margin: 50px 0;
overflow-x: hidden;
}
/* ✅ 正确：max-width 后跟 'px' 单位 */
@media screen and (max-width: 500px) {
body {
background-color: black;
margin: 30px 0; /* 可同时调整其他属性 */
}
}
/* ✅ 推荐：也可使用 Tailwind 预设断点（更语义化） */
@media (min-width: 640px) { /* sm */
body { font-size: 1rem; }
}
@media (min-width: 768px) { /* md */
body { font-size: 1.125rem; }
}⚠️ 注意事项：
- 不要混用
@media和@layer写法：globals.css中的普通媒体查询无需包裹在@layer内，仅当自定义组件类需归入components层时才需显式声明。 - Tailwind 的响应式工具类（如
md:text-lg）与全局 CSS 媒体查询完全正交——前者生成原子类，后者作用于真实选择器，二者可共存互补。 - 若仍不生效，请检查：
- 浏览器开发者工具「Styles」面板是否显示该媒体查询规则（确认是否被解析）；
- 是否存在更高优先级的内联样式或 !important 覆盖；
-
globals.css是否已通过_app.tsx正确引入（如import '../styles/globals.css'）。
? 总结：在 Next.js + Tailwind 项目中，globals.css 支持原生 CSS 媒体查询，只需确保语法规范（单位不可省略）、路径引入正确、无优先级冲突，即可高效实现面向标签的响应式布局，特别适合统一控制 Markdown 解析后的 <p></p>、<blockquote></blockquote>、<pre class="brush:php;toolbar:false;"></pre> 等元素表现。
立即学习“前端免费学习笔记（深入）”；
