Saat menulis kueri media CSS, apakah ada cara Anda dapat menentukan beberapa kondisi dengan logika "ATAU"?

Saya mencoba melakukan sesuatu seperti ini:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Gunakan koma untuk menentukan dua (atau lebih) aturan yang berbeda:

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

Dari https://developer.mozilla.org/en/CSS/Media_queries/

... Selain itu, Anda dapat menggabungkan beberapa kueri media dalam daftar yang dipisahkan koma; jika ada salah satu pertanyaan media dalam daftar itu benar, style sheet yang terkait diterapkan. Ini sama dengan operasi logis "atau".

CSS Media Query & Operator Logis: Tinjauan Singkat;)

Jawaban cepat.

Pisahkan aturan dengan koma: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Jawaban panjangnya.

Ada banyak hal di sini, tetapi saya sudah mencoba membuatnya padat informasi, bukan hanya tulisan yang lembut. Ini kesempatan bagus untuk belajar sendiri! Luangkan waktu untuk membaca secara sistematis dan saya harap ini akan membantu.

Kueri Media

Pertanyaan media pada dasarnya digunakan dalam desain web untuk menciptakan pengalaman penelusuran khusus perangkat atau situasi; ini dilakukan dengan menggunakan @mediadeklarasi dalam CSS halaman . Ini dapat digunakan untuk menampilkan halaman web secara berbeda dalam sejumlah besar keadaan: apakah Anda menggunakan tablet atau TV dengan rasio aspek yang berbeda, apakah perangkat Anda memiliki warna atau layar hitam-putih, atau, mungkin paling sering, saat seorang pengguna mengubah ukuran browser mereka atau beralih di antara perangkat browsing dengan ukuran layar yang bervariasi (secara umum, desain seperti ini disebut sebagai Desain Web Responsif )

Operator yang logis

Dalam mendesain untuk situasi ini, tampaknya ada empat Operator Logika yang dapat digunakan untuk memerlukan kombinasi persyaratan yang lebih kompleks ketika menargetkan berbagai perangkat atau ukuran area pandang .

(Catatan: Jika Anda tidak memahami perbedaan antara aturan media, kueri media, dan kueri fitur, telusuri bagian bawah jawaban ini terlebih dahulu untuk mengenal sedikit lebih baik tentang terminologi yang terkait dengan sintaksis kueri media

1. DAN ( dan kata kunci)

Mensyaratkan bahwa semua kondisi yang ditentukan harus dipenuhi sebelum aturan gaya akan berlaku.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Aturan gaya yang ditentukan tidak akan berlaku kecuali semua hal berikut ini dinilai benar:

• Jenis media adalah 'layar' dan
• Lebar viewport minimal 700px dan
• Orientasi layar saat ini lanskap.

Catatan: Saya percaya bahwa yang digunakan bersama, ketiga kueri fitur ini membentuk kueri media tunggal .

2. ATAU ( daftar yang dipisahkan koma )

Daripada kata kunci atau , daftar yang dipisahkan koma digunakan dalam merantai beberapa pertanyaan media bersama untuk membentuk aturan media yang lebih kompleks

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Aturan gaya yang ditentukan akan berlaku setelah salah satu kueri media dievaluasi sebagai benar :

1. Jenis media adalah 'genggam' atau
2. Lebar viewport setidaknya 650px atau
3. Orientasi layar saat ini lanskap.

3. TIDAK ( bukan kata kunci)

Kata kunci not dapat digunakan untuk meniadakan permintaan media tunggal (dan BUKAN aturan media penuh artinya hanya meniadakan entri antara set koma dan bukan aturan media lengkap setelah deklarasi @ media).

Demikian pula, perhatikan bahwa kata kunci yang tidak meniadakan permintaan media, itu tidak dapat digunakan untuk meniadakan permintaan fitur individual dalam permintaan media. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Gaya yang ditentukan di sini akan berlaku jika

1. Jenis media DAN resolusi minimum tidak keduanya memenuhi persyaratan (masing-masing 'layar' dan '300 dpi') atau
2. Lebar viewport minimal 800 piksel.

Dengan kata lain, jika jenis media adalah 'layar' dan resolusi minimum adalah 300 dpi, aturannya tidak akan akan berlaku kecuali lebar minimum viewport minimal 800 piksel.

(Kata kunci yang bukan bisa sedikit funky untuk dinyatakan. Beri tahu saya jika saya bisa melakukan yang lebih baik.;)

4. HANYA ( hanya kata kunci)

Seperti yang saya pahami, satu - satunya kata kunci yang digunakan untuk mencegah browser yang lebih lama dari salah menafsirkan kueri media yang lebih baru sebagai jenis media yang sebelumnya digunakan, lebih sempit. Ketika digunakan dengan benar, browser yang lebih lama / tidak sesuai harus mengabaikan gaya sama sekali.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Peramban yang lebih lama / tidak patuh hanya akan mengabaikan baris kode ini sama sekali, saya percaya karena akan membaca satu - satunya kata kunci dan menganggapnya sebagai jenis media yang salah . (Lihat di sini dan di sini untuk info lebih lanjut dari orang yang lebih pintar)

UNTUK INFO LEBIH LANJUT

Untuk info lebih lanjut (termasuk lebih banyak fitur yang dapat ditanyakan), lihat: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Memahami Terminologi Permintaan Media

Catatan: Saya perlu mempelajari terminologi berikut untuk semua yang ada di sini agar masuk akal, terutama mengenai kata kunci yang tidak . Ini dia seperti yang saya pahami:

Sebuah media yang aturan (MDN juga tampaknya untuk memanggil pernyataan media ini) termasuk istilah @mediadengan semua pertanyaan medianya berikutnya

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Sebuah media yang permintaan adalah satu set query fitur. Mereka dapat sesederhana satu kueri fitur atau mereka dapat menggunakan dan kata kunci untuk membentuk kueri yang lebih kompleks. Kueri media dapat dipisahkan dengan koma untuk membentuk aturan media yang lebih kompleks (lihat atau kata kunci di atas).

screen (Catatan: Hanya satu permintaan fitur yang digunakan di sini.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

BUKAN handheld, (min-width: 650px). (Perhatikan koma: ada dua pertanyaan media di sini.)

Sebuah fitur permintaan adalah bagian paling dasar dari media ketentuan yang dan hanya menyangkut fitur yang diberikan dan statusnya dalam situasi yang sedang berada diberikan.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Cuplikan kode dan informasi yang berasal dari:

Permintaan media CSS oleh Mozilla Contributors (dilisensikan di bawah CC-BY-SA 2.5 ). Beberapa contoh kode digunakan dengan perubahan kecil untuk (mudah-mudahan) meningkatkan kejelasan penjelasan.

Ada dua cara untuk menulis kueri media yang tepat di css. Jika Anda menulis kueri media dari perangkat yang lebih besar terlebih dahulu maka cara penulisan yang benar adalah:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Tetapi jika Anda menulis pertanyaan media untuk perangkat yang lebih kecil terlebih dahulu maka itu akan menjadi seperti:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}