Bir CSS medya sorgusu yazarken, "VEYA" mantığıyla birden çok koşul belirlemenin herhangi bir yolu var mı?

Ben böyle bir şey yapmaya çalışıyorum:

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

İki (veya daha fazla) farklı kural belirtmek için virgül kullanın:

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

Gönderen https://developer.mozilla.org/en/CSS/Media_queries/

... Ayrıca, birden çok medya sorgusunu virgülle ayrılmış bir listede birleştirebilirsiniz; listedeki medya sorgularından herhangi biri doğruysa, ilişkili stil sayfası uygulanır. Bu, mantıksal bir "veya" işleminin eşdeğeridir.

CSS Medya Sorguları ve Mantıksal Operatörler: Kısa Bir Bakış;)

Hızlı cevap.

Kuralları virgülle ayırın: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Uzun cevap.

Burada çok şey var, ama sadece kabarık yazı değil, bilgiyi yoğunlaştırmaya çalıştım. Kendimi öğrenmek için iyi bir şans oldu! Gerçi sistematik olarak okumak için zaman ayırın ve umarım faydalı olacaktır.

Medya sorguları

Medya sorguları temel olarak web tasarımında cihaza veya duruma özgü tarama deneyimleri oluşturmak için kullanılır; bu, @mediabir sayfanın CSS'sindeki bildirim kullanılarak yapılır . Bu, bir web sayfasını çok sayıda durumda farklı şekilde görüntülemek için kullanılabilir: farklı en boy oranlarına sahip bir tablette veya TV'de olun, cihazınızın renkli veya siyah beyaz bir ekranı olup olmadığı veya belki de en sık bir kullanıcı tarayıcısının boyutunu değiştirir veya değişen ekran boyutlarına sahip tarama cihazları arasında geçiş yapar (genel olarak konuşursak, bunun gibi tasarımlar Duyarlı Web Tasarımı olarak adlandırılır )

Mantıksal operatörler

Bu durumlar için tasarım yaparken, çeşitli cihazları veya görünüm alanı boyutlarını hedeflerken daha karmaşık gereksinimler kombinasyonları gerektirebilecek dört Mantıksal Operatör olduğu görülmektedir .

(Not: Medya kuralları, medya sorguları ve özellik sorguları arasındaki farkları anlamadıysanız, medya sorgusu sözdizimiyle ilişkili terminolojiyi daha iyi tanımak için önce bu cevabın alt bölümüne göz atın.

1. VE ( ve anahtar kelime)

Gerektirir belirtilen tüm koşulların yerine getirilmesi gerekir yürürlüğe girecek stil kurallardan önce.

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

Aşağıdakilerin tümü doğru olarak değerlendirilmedikçe, belirtilen stil kuralları geçerli olmaz :

• Ortam türü 'ekran' ve
• Görüntü alanı en az 700 piksel genişliğinde ve
• Ekran yönü şu anda yatay.

Not: Bu üç özellik sorgusunun birlikte kullanıldığında tek bir medya sorgusu oluşturduğuna inanıyorum .

2. VEYA ( Virgülle ayrılmış listeler )

Bir anahtar kelimeden veya anahtar kelimeden ziyade , daha karmaşık bir ortam kuralı oluşturmak için birden çok ortam sorgusunu birlikte zincirlemek için virgülle ayrılmış listeler kullanılır

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

Belirtilen stil kuralları, herhangi bir medya sorgusu doğru olarak değerlendirildiğinde geçerli olacaktır :

1. Ortam türü 'elde taşınır' veya
2. Görünüm en az 650 piksel genişliğinde veya
3. Ekran yönü şu anda yatay.

3. DEĞİL ( anahtar kelime değil )

Değil anahtar kelime olabilir tek etkisiz duruma getirmek için kullanılan Medya sorgusunun (ve NOT tam bir medya kural sadece tam medya @media ilanı sonrasında kural bir virgül setinde değil arasındaki girdileri selbettiğini --meaning).

Benzer şekilde, not o değil kelime olumsuzlar medya sorguları, olamaz bir medya sorgu içinde bireysel özellik sorgusu etkisiz duruma getirmek için kullanılabilir. *

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

Burada belirtilen stil,

1. Ortam türü VE min. Çözünürlük hem gereksinimlerini karşılamıyor (sırasıyla 'ekran' ve '300dpi') veya
2. Görünüm en az 800 piksel genişliğindedir.

Başka bir deyişle, ortam türü 'ekran' ve minimum çözünürlük 300 dpi ise, görünüm penceresinin minimum genişliği en az 800 piksel olmadığı sürece kural geçerli olmaz .

(Not anahtar kelimesi belirtmek biraz korkak olabilir. Daha iyisini yapıp yapamayacağımı bana bildirin.)

4. SADECE ( yalnızca anahtar kelime)

Anladığım kadarıyla, tek anahtar kelime eski tarayıcıların yeni medya sorgularını daha önce kullanılan, daha dar medya türü olarak yanlış yorumlamasını önlemek için kullanılır. Doğru kullanıldığında, eski / uyumlu olmayan tarayıcılar, stili tamamen göz ardı etmelidir.

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

Eski / uyumlu olmayan bir tarayıcı sadece bu kod satırını tamamen görmezden gelir, tek anahtar kelimeyi okuyacağına ve yanlış bir medya türü olarak değerlendireceğine inanıyorum . (Daha akıllı insanlardan daha fazla bilgi için buraya ve buraya bakın )

DAHA FAZLA BİLGİ İÇİN

Daha fazla bilgi için (sorgulanabilecek daha fazla özellik dahil) bakınız: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Medya Sorgusu Terminolojisini Anlama

Not: Buradaki her şeyin mantıklı olması için, özellikle anahtar kelimeyle ilgili olmayan aşağıdaki terminolojiyi öğrenmem gerekiyordu . İşte anladığım kadarıyla:

Bir medya kuralı (MDN, bu medya ifadelerini de çağırıyor gibi görünüyor), @mediasonraki tüm medya sorgularıyla ilgili terimi içerir

@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)

Bir medya sorgusu özelliği sorguları kümesidir. Bir özellik sorgusu kadar basit olabilir veya daha karmaşık bir sorgu oluşturmak için ve anahtar sözcüğünü kullanabilirler . Medya sorguları daha karmaşık medya kuralları oluşturmak için virgülle ayrılabilir ( yukarıdaki veya anahtar kelimesine bakın ).

screen (Not: Burada yalnızca bir özellik sorgusu kullanılmaktadır.)

only screen

only screen and (max-resolution:800dpi)

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

DEĞİL handheld, (min-width: 650px). (Virgüle dikkat edin: burada iki medya sorgusu vardır.)

Bir özellik sorgusu kuralı bir medyanın en temel kısmıdır ve sadece belirli bir özelliği ve belirli gezen durumda durumunu ilgilidir.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Kod parçacıkları ve şunlardan türetilen bilgiler:

CSS medya sorguları tarafından Mozilla Katkıda (altında lisanslı CC-BY-SA 2.5 ). Bazı kod örnekleri, açıklamanın netliğini artırmak için (umarım) küçük değişiklikler ile kullanılmıştır.

Css'de uygun bir medya sorgusu yazmanın iki yolu vardır. Öncelikle daha büyük bir aygıt için medya sorguları yazıyorsanız, doğru yazma yolu şöyle olacaktır:

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

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

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

Ama önce daha küçük cihaz için medya sorguları yazıyorsanız, o zaman şöyle bir şey olurdu:

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

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

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