Bagaimanakah Saya Boleh Menggunakan Logik 'ATAU' dalam Pertanyaan Media CSS?

Menggunakan Logik "ATAU" dalam Pertanyaan Media CSS

Pertanyaan media CSS membolehkan anda menggunakan gaya berdasarkan pelbagai keadaan peranti atau skrin, seperti sebagai lebar dan tinggi. Walau bagaimanapun, anda mungkin menghadapi situasi di mana anda perlu menentukan berbilang syarat menggunakan logik "ATAU".

Berbilang Syarat dengan "ATAU"

Walaupun pertanyaan media CSS tidak secara eksplisit menyokong logik "ATAU", anda boleh mencapai fungsi yang sama menggunakan koma untuk menggabungkan berbilang pertanyaan menjadi satu peraturan.

Contoh

Jika anda mahu menggunakan gaya apabila lebar skrin kurang daripada atau sama dengan 995px atau ketinggian skrin kurang daripada atau sama dengan 700px, anda boleh menggunakan pertanyaan media berikut:

@media screen and (max-width: 995px), screen and (max-height: 700px) {
  ...
}

Dalam contoh ini, koma bertindak sebagai logik pengendali "ATAU". Jika sama ada syarat lebar maksimum atau ketinggian maksimum dipenuhi, gaya dalam pertanyaan media akan digunakan.

Berbilang Syarat dengan "DAN"

Perhatikan bahawa koma dalam pertanyaan media juga menyokong logik "DAN". Jika anda ingin menggunakan gaya hanya apabila kedua-dua syarat lebar maksimum dan ketinggian maksimum dipenuhi, anda boleh menggunakan sintaks berikut:

@media screen and (max-width: 995px) and (max-height: 700px) {
  ...
}

Kesimpulan

Menggunakan koma dalam pertanyaan media CSS membolehkan anda menentukan berbilang syarat menggunakan logik "ATAU" atau "DAN". Ini memberikan fleksibiliti dalam mengawal aplikasi gaya berdasarkan pelbagai ciri skrin atau peranti.

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