Bagaimana untuk Menggayakan Div sebagai Dataran Responsif?

Menggayakan Div sebagai Petak Responsif

Mencapai elemen div yang melaraskan ketinggiannya secara automatik agar sepadan dengan lebarnya sambil mengekalkan nisbah aspek boleh cabaran penggayaan biasa. Berikut ialah penjelasan dan penyelesaian terperinci:

Metodologi CSS

Untuk mencipta div segi empat sama responsif, kita boleh menggunakan sifat CSS "padding-bottom" dan unit "% ". Kaedah ini memastikan bahawa ketinggian div kekal berkadar dengan lebarnya. Dengan menetapkan bahagian bawah padding kepada nilai peratusan yang sama dengan lebar, kami mencipta bekas berbentuk segi empat sama dengan berkesan.

Kod HTML dan CSS

Inilah HTML dan Kod CSS yang berjaya ini:

<div>

#square {
  height: 0;
  width: 20%;
  padding-bottom: 20%;
  background-color: red;
}

Penjelasan

• Sifat "ketinggian" ditetapkan kepada 0, membenarkan bahagian bawah pelapik mengawal ketinggian.
• Harta "lebar" ditetapkan kepada 20%, mentakrifkan peratusan lebar div.
• Sifat "padding-bottom" juga ditetapkan kepada 20%, mewujudkan div berbentuk segi empat sama.

Apabila lebar bekas induk berubah, div akan mengekalkannya nisbah aspek, melaraskan ketinggiannya secara automatik agar sepadan dengan baharunya lebar.

Keserasian

Penyelesaian ini berfungsi dengan berkesan pada pelbagai penyemak imbas, termasuk Firefox, Chrome, Edge dan Safari.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Div sebagai Dataran Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!