Bolehkah Anda Menggunakan Ungkapan Matematik dalam Harta `max-width` dalam CSS?

Mencapai Pengiraan Lebar Maks dalam CSS

Adakah mungkin untuk menggunakan ungkapan matematik dalam sifat lebar maksimum dalam CSS, seperti:

max-width: calc(max(500px, 100% - 80px))

atau

max-width: max(500px, calc(100% - 80px)))

Jawapan:

Walaupun pengiraan langsung dalam sifat lebar maksimum sebelum ini tidak dapat dilakukan, CSS moden memperkenalkan penyelesaian menggunakan pertanyaan media:

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

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

Pendekatan ini menetapkan lebar maksimum sebagai relatif kepada lebar port pandangan dengan minimum 500px, memastikan elemen tidak melebihi lebar itu walaupun bekas induk lebih lebar daripada 500px.

Atas ialah kandungan terperinci Bolehkah Anda Menggunakan Ungkapan Matematik dalam Harta `max-width` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!