PricingLoginStart free
Aplikasi Web Fullstack Next.js 15 · Pelajaran

Reka Bentuk Responsif dan Mod Gelap

Bina reka letak yang menyesuaikan diri dengan mana-mana skrin menggunakan titik henti berteraskan mudah alih, kemudian tambahkan mod gelap yang kemas dan peka pengguna dengan pemboleh ubah CSS serta Tailwind.

Pelajaran 4 daripada 413 langkah

Reka Bentuk Responsif dan Mod Gelap ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Pemikiran Diutamakan Mudah Alih

Reka bentuk responsif bermaksud satu susun atur yang menyesuaikan diri dengan telefon, tablet dan komputer meja. Pendekatan moden ialah diutamakan mudah alih: gayakan skrin kecil dahulu, kemudian tambahkan penambahbaikan untuk skrin yang lebih besar.

Pertanyaan Media

Peraturan CSS @media menggunakan gaya hanya apabila lebar melebihi (atau kurang daripada) nilai tertentu. Pendekatan diutamakan mudah alih menggunakan titik henti min-width.

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

Unit Fleksibel

Utamakan unit relatif supaya susun atur diskalakan secara semula jadi:

  • rem untuk jarak dan saiz fon
  • % dan fr untuk lebar
  • clamp() untuk tipografi fleksibel
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Titik Henti Tailwind

Tailwind menjadikan responsiviti sebaris dengan awalan seperti sm:, md:, lg:. Kelas tanpa awalan ialah asas mudah alih.

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

Flexbox dan Grid

Dua enjin susun atur ini meliputi hampir semua keperluan:

  • Flexbox untuk baris atau lajur satu dimensi
  • Grid untuk susun atur dua dimensi

Gabungkan kedua-duanya dan biarkan titik henti menyusun semula kandungan.

Apakah Mod Gelap?

Mod gelap menggantikan palet cerah dengan palet gelap untuk mengurangkan ketegangan mata dan menjimatkan bateri pada skrin OLED. Pelaksanaan yang baik menghormati keutamaan sistem pengguna serta membolehkan pengguna mengubahnya.

Keutamaan Sistem

Ciri media CSS prefers-color-scheme mengesan tema OS supaya anda boleh menggunakan pilihan yang telah ditetapkan oleh pengguna.

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

Pemboleh Ubah CSS untuk Tema

Tentukan warna sebagai sifat tersuai CSS pada akar, kemudian gantikannya untuk mod gelap. Komponen merujuk pemboleh ubah tersebut, jadi satu suis boleh menukar penampilan seluruh aplikasi.

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

Varian Gelap Tailwind

Tailwind menyediakan varian dark:. Togol kelas dark pada elemen html dan utiliti gelap akan diaktifkan.

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

Mengekalkan Pilihan

Simpan pilihan pengguna dalam localStorage dan gunakannya sebelum paparan dilukis untuk mengelakkan tema yang salah berkelip seketika. Pustaka seperti next-themes mengendalikan perkara ini dengan kemas dalam Next.js.

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

Kebolehcapaian dan Kontras

Walau apa pun temanya, pastikan teks mudah dibaca. Sasarkan nisbah kontras sekurang-kurangnya 4.5:1 untuk teks isi mengikut WCAG. Uji kedua-dua tema; warna yang sesuai pada latar putih mungkin tidak sesuai pada latar gelap.

Semakan Ringkas

Uji pengetahuan anda tentang responsiviti dan tema.

Jawab dalam pelajaran interaktif

Ulang Kaji

Anda telah mempelajari penggayaan adaptif:

  • Pertanyaan media diutamakan mudah alih dan unit fleksibel menyesuaikan susun atur
  • Awalan md:/lg: Tailwind menjadikan titik henti sebaris
  • Pemboleh ubah CSS bersama prefers-color-scheme menggerakkan mod gelap
  • Kekalkan pilihan dan pastikan kontras mudah diakses dalam kedua-dua tema
Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
12
Pelajaran
48
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Reka Bentuk Responsif dan Mod Gelap” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Reka Bentuk Responsif dan Mod Gelap”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Reka Bentuk Responsif dan Mod Gelap”?

Bina reka letak yang menyesuaikan diri dengan mana-mana skrin menggunakan titik henti berteraskan mudah alih, kemudian tambahkan mod gelap yang kemas dan peka pengguna dengan pemboleh ubah CSS serta… Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Reka Bentuk Responsif dan Mod Gelap” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Modul CSS dan Gaya Global
  2. Mengintegrasikan Tailwind CSS
  3. Pustaka Komponen dan Tema
  4. Reka Bentuk Responsif dan Mod Gelap
← Kembali ke Aplikasi Web Fullstack Next.js 15