Reka Letak CSS Moden Yang Sebenarnya Berfungsi: Panduan Pembangun

Hei! ? Selepas menghabiskan berjam-jam membantu pembangun menyahpepijat reka letak CSS mereka, saya perasan kita semua bertempur dalam pertempuran yang sama. Mari kita perbaikinya hari ini dengan beberapa penyelesaian CSS yang diuji pertempuran yang benar-benar berfungsi dalam pengeluaran.

Masalah Dengan Kebanyakan Tutorial CSS

Kami semua pernah ke sana. Anda menemui tutorial CSS, menyalin kod dan tiba-tiba:

• Ia rosak pada mudah alih
• Kandungan mula melimpah
• Footer melompat-lompat
• Semuanya runtuh apabila anda menambah kandungan sebenar

Kedengaran biasa? Mari kita selesaikan isu ini sekali dan untuk semua.

1. Reka Letak Apl "Tidak Pernah Gagal".

Mula-mula, mari kita menangani reka letak yang paling biasa: pengepala, kandungan boleh ditatal dan pengaki. Inilah yang kami mahu:

• Pengepala kekal di atas
• Footer kekal di bahagian bawah
• Tatal kawasan kandungan dan mengisi ruang yang tersedia
• Berfungsi pada semua saiz skrin
• Jangan melompat-lompat apabila kandungan dimuatkan

Ini penyelesaiannya:

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.footer {
  background: #f5f5f5;
}

.content {
  /* Prevent content from getting stuck under header */
  padding-top: var(--safe-padding, 1rem);
  overflow-y: auto;
}

<div>



<p>Why this works:</p>

<ul>
<li>Grid's 1fr handles the space distribution automatically</li>
<li>Sticky header stays visible while scrolling</li>
<li>Content scrolls independently</li>
<li>Footer always stays at the bottom</li>
</ul>

<h2>
  
  
  2. The "Works Everywhere" Card Grid
</h2>

<p>Need cards that look good no matter how many you have? This solution handles everything from 1 to 100 cards:<br>
</p>

<pre class="brush:php;toolbar:false">.card-container {
  --min-card-width: 300px;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-card-width), 100%), 1fr)
  );
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 2vw, 2rem);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-content {
  flex: 1;  /* Takes up remaining space */
}

.card-footer {
  margin-top: auto;  /* Pushes footer to bottom */
}

Apa yang membuatkan ini istimewa:

• Kad melaraskan secara automatik daripada 1 hingga 4 lajur
• Tiada pertanyaan media diperlukan
• Ketinggian yang sama tanpa regangan yang pelik
• Jurang responsif yang kelihatan baik pada sebarang saiz
• Berfungsi dengan kandungan dinamik

3. Lebar Kandungan Yang Sempurna

Pernah perasan betapa sukarnya membaca teks yang menjangkau lebar penuh skrin lebar? Inilah cara untuk membetulkannya:

.content-wrapper {
  --content-width: 65ch;
  --padding: clamp(1rem, 5vw, 3rem);

  width: min(var(--content-width), 100%);
  margin-inline: auto;
  padding-inline: var(--padding);
}

.text-content {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
}

/* For full-width backgrounds with contained content */
.full-width {
  width: 100%;
  padding-inline: var(--padding);
}

.full-width > * {
  width: min(var(--content-width), 100%);
  margin-inline: auto;
}

Sebab pembangun menyukai ini:

• Lebar bacaan yang sempurna pada semua peranti
• Penskalaan fon licin
• Padding konsisten yang menyesuaikan dengan saiz skrin
• Mudah diselenggara

Petua Dunia Sebenar yang Menjimatkan Masa

1. Sentiasa Uji Kes Edge

   /* Add this to your dev environment */
   * {
     outline: 1px solid rgba(255,0,0,0.1);
   }

Ini membantu mengesan isu reka letak lebih awal.

1. Diutamakan Mudah Alih Bukan Pilihan

   /* Start here */
   .element {
     flex-direction: column;
     gap: 1rem;
   }

   /* Then enhance */
   @media (min-width: 768px) {
     .element {
       flex-direction: row;
     }
   }

1. Gunakan Sifat Tersuai untuk Ketekalan

   :root {
     --spacing-unit: 0.5rem;
     --padding-sm: calc(var(--spacing-unit) * 2);
     --padding-md: calc(var(--spacing-unit) * 4);
     --padding-lg: calc(var(--spacing-unit) * 8);
   }

Gotcha Biasa untuk Dielakkan

1. Jangan gunakan ketinggian tetap melainkan sangat diperlukan
2. Sentiasa pertimbangkan sasaran sentuhan (min 44x44px)
3. Uji dengan kandungan sebenar, bukan Lorem Ipsum
4. Semak reka letak dengan saiz fon yang berbeza

Cubalah Sendiri

Cara terbaik untuk belajar ialah dengan melakukan. Ambil coretan ini dan cuba dalam projek anda. Mulakan dengan reka letak apl – ia adalah asas yang dibina atas segala-galanya.

Ada soalan? Temui cara untuk memperbaiki corak ini? Tinggalkan komen di bawah! Saya biasanya membalas dalam masa 24 jam.

Jika ini membantu anda, pertimbangkan:

• Penanda halaman untuk rujukan masa hadapan
• Berkongsi dengan pasukan anda
• Mengikuti lebih banyak petua CSS praktikal

Atas ialah kandungan terperinci Reka Letak CSS Moden Yang Sebenarnya Berfungsi: Panduan Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!