Bagaimana cara menggunakan CSS Flexbox untuk melaksanakan susun atur imej dan teks yang responsif?

CSS Flexbox Responsive Layout: Gabungan gambar dan teks yang sempurna

Adalah penting untuk membina susun atur web penyesuaian untuk menangani saiz skrin yang berbeza. Artikel ini akan menunjukkan cara menggunakan CSS Flexbox untuk mencapai keperluan susun atur yang sama: gambar saiz tetap di sebelah kiri dan adaptif kandungan teks di sebelah kanan. Pada peranti skrin lebar, teks menduduki ruang yang tinggal; Pada peranti Narrowscreen (seperti telefon bimbit), imej dipaparkan di atas teks.

Cabaran: Melaksanakan susun atur penyesuaian saiz skrin

Sasaran: Gunakan susun atur Flexbox, memaparkan imej piksel 200x200 di sebelah kiri dan teks di sebelah kanan. Di bawah skrin besar, teks mengisi ruang yang tinggal; Di bawah skrin kecil, gambar terletak di atas teks.

Percubaan sebelumnya (seperti kod yang dihasilkan oleh CHATGPT) mungkin mempunyai masalah: susun atur hanya berskala sama dan tidak boleh diselaraskan secara dinamik mengikut saiz skrin.

Penyelesaian: Cleverly Gunakan metadata viewport dan pertanyaan media

Kuncinya ialah: Tambah metadata viewport dan pertanyaan media.

Pertama, dalam HTML Sebahagiannya tambahkan metadata viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Barisan kod ini memberitahu penyemak imbas bahawa lebar halaman sepadan dengan lebar peranti, dengan nisbah skala awal 1.0, memastikan kesan responsif.

Kedua, laraskan kod CSS dan gunakan pertanyaan media untuk mengawal susun atur di bawah saiz skrin yang berbeza:

 .container {
  Paparan: Flex;
}

.Image {
  Lebar: 200px;
  Ketinggian: 200px;
}

.teks {
  Flex: 1; /* menduduki ruang yang tinggal*/
}

@media (max-width: 600px) { /* untuk peranti skrin kecil* /
  .container {
    flex-arah: lajur; /* Tukar susun atur ke menegak*/
  }
  .teks {
    Flex: awal; /* Batalkan atribut flex untuk menyesuaikan lebar teks*/
  }
}

Contoh Struktur HTML:

<div class="container">
  <div class="image">gambar</div>
  <div class="text">Kandungan teks</div>
</div>

Melalui pelarasan di atas, susun atur akan berubah secara dinamik mengikut lebar skrin. Di bawah skrin besar, gambar dan teks disusun secara mendatar; Di bawah skrin kecil, gambar -gambar terletak di atas teks, disesuaikan dengan sempurna dengan peranti yang berbeza.

Atas ialah kandungan terperinci Bagaimana cara menggunakan CSS Flexbox untuk melaksanakan susun atur imej dan teks yang responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!