Bagaimanakah Saya Boleh Mengira Lebar Maksimum dalam CSS Tanpa Menggunakan Fungsi `maks`?

Mengira Lebar Maksimum dalam CSS

Dalam CSS, pada masa ini tidak boleh dilakukan untuk mengira secara langsung lebar maksimum sebagai fungsi nilai lain menggunakan fungsi maks. Percubaan untuk berbuat demikian dengan binaan seperti max-width: calc(max(500px, 100% - 80px)) atau max-width: max(500px, calc(100% - 80px))) tidak akan menghasilkan hasil yang diingini.

Penyelesaian CSS dengan Pertanyaan Media

Walau bagaimanapun, adalah mungkin untuk mencapai kesan yang sama menggunakan pertanyaan media:

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

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

Dalam contoh ini, . elemen yourselector akan mempunyai lebar maksimum berdasarkan saiz viewport. Apabila port pandangan lebih lebar daripada 500px, lebar maksimum akan ditetapkan sebagai perbezaan antara lebar paparan dan 80px. Walau bagaimanapun, apabila port pandangan berada pada 500px atau lebih sempit, lebar maksimum akan ditetapkan secara eksplisit kepada 500px.

Pendekatan ini berkesan menggunakan pertanyaan media untuk mengira lebar maksimum secara dinamik berdasarkan saiz skrin, sekali gus meniru fungsi yang diingini fungsi maksimum dalam cara yang terhad.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengira Lebar Maksimum dalam CSS Tanpa Menggunakan Fungsi `maks`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!