Mengapa Saya Tidak Boleh Menggunakan Pembolehubah CSS dalam Pertanyaan Media?

Pembolehubah CSS Asli Tidak Tersedia dalam Pertanyaan Media

Pengguna awal pembolehubah CSS mungkin menghadapi masalah apabila cuba memasukkannya ke dalam pertanyaan media. Pendekatan biasa seperti:

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

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

}

tidak akan berfungsi seperti yang diharapkan.

Di Sebalik Tabir: Sekatan Spesifikasi CSS

Mengikut spesifikasi CSS , fungsi var() hanya terpakai dalam nilai sifat. Ia dilarang dalam konteks lain, seperti nama harta, pemilih atau pertanyaan media. Ini menjelaskan mengapa menggunakannya dalam pertanyaan media adalah tidak sah.

Pertimbangan Operasi

Penghadan ini adalah logik. Walaupun pembolehubah CSS boleh diberikan kepada elemen akar (cth., ) dan diwarisi oleh keturunan, pertanyaan media bukan elemen itu sendiri dan oleh itu tidak mempunyai keupayaan warisan.

Penyelesaian Alternatif

Pembolehubah CSS tidak direka bentuk untuk menangani kes penggunaan khusus ini. Sebagai penyelesaian, seseorang boleh menggunakan prapemproses CSS, yang menyediakan fungsi tambahan dan membenarkan penggunaan berubah-ubah dalam pertanyaan media.

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