Bolehkah Pengiraan CSS Menentukan Lebar Maksimum Elemen?

Bolehkah Pengiraan CSS Menentukan Lebar Maksimum?

Mungkin wajar untuk menetapkan lebar maksimum elemen berdasarkan pengiraan, seperti memilih kurang daripada dua nilai. Walau bagaimanapun, sintaks CSS biasanya hanya membenarkan satu nilai untuk lebar maksimum.

Penyelesaian Potensi

Satu pendekatan yang mungkin adalah menggunakan pengiraan bersarang, seperti:

<code class="css">max-width: calc(max(500px, 100% - 80px))</code>

Walau bagaimanapun, ini tidak disokong oleh semua penyemak imbas.

Satu lagi penyelesaian berpotensi ialah menggunakan pertanyaan media:

<code class="css">.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}</code>

Kaedah ini mencipta dua peraturan: satu untuk skrin yang lebih luas daripada 500px dan satu untuk skrin yang lebih sempit daripada 500px. Peraturan kedua secara berkesan mengatasi yang pertama, memastikan bahawa lebar maksimum elemen dihadkan kepada 500px apabila lebar skrin berada di bawah ambang itu.

Atas ialah kandungan terperinci Bolehkah Pengiraan CSS Menentukan Lebar Maksimum Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!