Bagaimana untuk Mencipta Div Square Responsif dengan Nisbah Aspek dan Pemusatan?

Mengekalkan Nisbah Aspek mengikut Dimensi Viewport

Untuk mencapai div segi empat sama responsif yang mengekalkan nisbah bidang berdasarkan lebar dan ketinggian viewport, leverage Sifat nisbah aspek CSS.

Keperluan:

• CSS Tulen
• Petak menyesuaikan diri dengan dimensi minimum port pandangan tanpa mengira orientasi
• Pemusatan mendatar dan menegak dalam port pandangan

Penyelesaian nisbah aspek

Sifat nisbah aspek membolehkan anda menentukan nisbah bidang yang diingini. Secara lalai, harta itu menetapkan ketinggian berbanding lebar. Oleh itu, nisbah aspek 1 / 1 menghasilkan segi empat sama.

<code class="css">.square {
  aspect-ratio: 1 / 1;
  background: orange;
}</code>

Menyesuaikan diri dengan Dimensi Viewport

Untuk memastikan div segi empat sama anda menyesuaikan diri dengan dimensi minimum viewport:

<code class="css">div {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;  /* For centering */
}</code>

Kesimpulan

Menggunakan nisbah aspek, anda boleh mencipta div segi empat sama responsif yang mengekalkan nisbah bidangnya dan berpusat di dalam port pandangan, memastikan pengalaman visual yang konsisten tanpa mengira dimensi atau orientasi port pandangan.

<code class="css">div {
  ...
  margin: 0 auto;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Square Responsif dengan Nisbah Aspek dan Pemusatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!