Mengapa Pembolehubah CSS Saya Tidak Berfungsi dalam Pertanyaan Media?

Masalah: Pembolehubah CSS Tidak Berfungsi dalam Pertanyaan Media

Apabila cuba memasukkan pembolehubah CSS ke dalam pertanyaan media, ia tetap tidak berkesan. Kod berikut berfungsi sebagai contoh:

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Penjelasan:

Mengikut spesifikasi CSS:

"Fungsi var() boleh digunakan sebagai ganti mana-mana bahagian nilai dalam mana-mana harta pada elemen Fungsi var() tidak boleh digunakan sebagai nama harta, pemilih atau apa-apa lagi selain nilai harta."

Dalam erti kata lain, walaupun pembolehubah boleh digabungkan ke dalam nilai harta, ia tetap tidak serasi dengan pertanyaan media. Ini disebabkan oleh fakta bahawa pertanyaan media bukan elemen HTML dan oleh itu tidak boleh mewarisi daripada elemen akar di mana pembolehubah biasanya ditakrifkan.

Alternatif:

Untuk mencapai yang serupa kefungsian, pembangun boleh mempertimbangkan untuk menggunakan prapemproses CSS. Prapemproses memanjangkan CSS dengan membenarkan kod tersuai ditulis, yang boleh digunakan untuk membuat pertanyaan media dinamik berdasarkan nilai pembolehubah.

Atas ialah kandungan terperinci Mengapa Pembolehubah CSS Saya Tidak Berfungsi dalam Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!