Next.js 15 Fullstack Web Apps · 课时

响应式设计与深色模式

使用移动优先断点构建适应各种屏幕的布局，并通过 CSS 变量和 Tailwind 添加精致且符合用户偏好的深色模式。

响应式设计与深色模式 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Mobile-First Thinking

Responsive design means one layout that adapts to phones, tablets, and desktops. The modern approach is mobile-first: style the small screen first, then add enhancements for larger ones.

Media Queries

The CSS @media rule applies styles only above (or below) a width. Mobile-first uses min-width breakpoints.

.grid { display: block; }
@media (min-width: 768px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

Fluid Units

Prefer relative units so layouts scale naturally:

rem for spacing and font size
% and fr for widths
clamp() for fluid typography

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Tailwind Breakpoints

Tailwind makes responsiveness inline with prefixes like sm:, md:, lg:. Unprefixed classes are the mobile base.

<div class="block md:grid md:grid-cols-2 lg:grid-cols-3">

Flexbox and Grid

Two layout engines cover almost everything:

Flexbox for one-dimensional rows or columns
Grid for two-dimensional layouts

Combine them and let breakpoints reflow content.

What Is Dark Mode?

Dark mode swaps a light palette for a dark one to reduce eye strain and save battery on OLED screens. A good implementation respects the user system preference and lets them override it.

System Preference

The CSS media feature prefers-color-scheme detects the OS theme so you can default to what the user already chose.

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

CSS Variables for Theming

Define colors as CSS custom properties on the root, then override them for dark mode. Components reference variables, so a single switch repaints the whole app.

:root { --bg: #fff; --fg: #111; }
[data-theme='dark'] { --bg: #111; --fg: #eee; }
body { background: var(--bg); color: var(--fg); }

Tailwind Dark Variant

Tailwind ships a dark: variant. Toggle a dark class on the html element and dark utilities activate.

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">

Persisting the Choice

Store the user choice in localStorage and apply it before paint to avoid a flash of the wrong theme. Libraries like next-themes handle this cleanly in Next.js.

const theme = localStorage.getItem('theme') || 'system';
document.documentElement.dataset.theme = theme;

Accessibility & Contrast

Whatever the theme, keep text readable. Aim for a contrast ratio of at least 4.5:1 for body text per WCAG. Test both themes; a color that works on white may fail on dark.

Quick Check

Test your responsive and theming knowledge.

Recap

You learned adaptive styling:

Mobile-first media queries and fluid units adapt layouts
Tailwind md:/lg: prefixes make breakpoints inline
CSS variables plus prefers-color-scheme power dark mode
Persist the choice and keep contrast accessible in both themes

常见问题解答

「响应式设计与深色模式」课时是免费的吗？

是的 — 「响应式设计与深色模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

「响应式设计与深色模式」这节课中我会学到什么？

使用移动优先断点构建适应各种屏幕的布局，并通过 CSS 变量和 Tailwind 添加精致且符合用户偏好的深色模式。你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack Web Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「响应式设计与深色模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Next.js 15 Fullstack Web Apps