Kenapa susun atur tidak berubah dengan lebar skrin apabila menggunakan susun atur CSS Flex untuk mencapai reka bentuk responsif?

Soalan Lazim dan Penyelesaian untuk CSS Flex Layout Reka bentuk responsif

Untuk membina laman web responsif, susun atur CSS Flex adalah alat yang berkuasa. Tetapi kadang -kadang, susun atur flex melakukan tidak konsisten pada saiz skrin yang berbeza, yang biasanya berkaitan dengan tetapan Viewport. Sebagai contoh, anda mahu gambar dan teks dipaparkan bersebelahan pada peranti skrin lebar; Semasa di skrin telefon, gambar terletak di atas teks. Walau bagaimanapun, walaupun dengan pertanyaan media, susun atur mungkin tidak dapat disesuaikan.

Sebab akar masalah adalah kekurangan meta meta meta yang tidak betul. Lebar viewport lalai penyemak imbas biasanya besar (contohnya, 980px), menyebabkan pertanyaan media gagal.

Penyelesaian:

Dalam html Sebahagiannya tambahkan tag meta viewport untuk menetapkan paparan dengan betul:

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

Barisan kod ini memberitahu penyemak imbas untuk menetapkan lebar halaman ke lebar peranti, dengan nisbah skala awal 1.0, supaya halaman dapat diberikan mengikut lebar sebenar peranti sebelum pertanyaan media dapat berkuatkuasa.

Contoh kod lengkap:

Kod berikut menunjukkan cara menukar antara susun atur gambar dan teks melalui susun atur flex di bawah saiz skrin yang berbeza:

 



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





  
gambar
  
teks

Dengan menambah tag Meta Viewport dan menyesuaikan kod CSS, anda boleh mencapai kesan yang dikehendaki dengan memastikan bahawa elemen .text boleh disesuaikan dengan lebar di bawah skrin kecil. Ingat bahawa dengan betul menetapkan Viewport adalah asas reka bentuk responsif, yang memastikan bahawa pertanyaan media anda betul -betul bertindak balas terhadap perubahan dalam saiz skrin yang berbeza.

Atas ialah kandungan terperinci Kenapa susun atur tidak berubah dengan lebar skrin apabila menggunakan susun atur CSS Flex untuk mencapai reka bentuk responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!