CSS medya sorgusu çakışmasının kuralları nelerdir?

Çakışmayı önlemek için medya sorgularını nasıl doğru bir şekilde aralıklandırırız?

Örneğin, kodu ele alırsak:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

Destekleyen tüm tarayıcılarda tam olarak 20em ve 45em'de ne olacak?

İnsanların kullandığını gördüm: 799px ve ardından 800px gibi şeyler, peki ya 799,5 piksel ekran genişliği? (Belli ki normal bir ekranda değil, retinada mı?)

Teknik özellikleri göz önünde bulundurarak buradaki cevabı en çok merak ediyorum.

CSS medya sorgusu çakışmasının kuralları nelerdir?

Çağlayan.

@mediakurallar kademeye şeffaftır, bu nedenle iki veya daha fazla @mediakural aynı anda eşleştiğinde, tarayıcı eşleşen tüm kurallarda stilleri uygulamalı ve kademeyi buna göre çözmelidir. ¹

Destekleyen tüm tarayıcılarda tam olarak 20em ve 45em'de ne olacak?

Tam olarak 20em genişliğinde, birinci ve ikinci medya sorgunuzun her ikisi de eşleşecektir. Tarayıcılar stilleri hem @mediakurallara uygulayacak hem de buna göre basamaklandıracaklardır, bu nedenle geçersiz kılınması gereken çelişkili kurallar varsa, en son bildirilen kazanır (belirli seçicileri hesaba katarak !important, vb.). Aynı şekilde, görüntü alanı tam olarak 45em genişliğinde olduğunda ikinci ve üçüncü medya sorgusu için.

Örnek kodunuzu göz önünde bulundurarak, bazı gerçek stil kuralları eklenmiş:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

Tarayıcı görüntü alanı tam olarak 20em genişliğinde olduğunda, bu medya sorgularının her ikisi de doğru olarak dönecektir. Basamaklama ile display: blockgeçersiz kılınır display: noneve float: leftsınıftaki herhangi bir öğeye uygulanır .sidebar.

Bunu, sanki medya sorguları orada değilmiş gibi, kuralları uygulamak olarak düşünebilirsiniz:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

Bir tarayıcı iki veya daha fazla medya sorgusuyla eşleştiğinde kademenin nasıl gerçekleştiğine dair başka bir örnek bu diğer cevapta bulunabilir .

Bununla birlikte, her iki kuralda da çakışmayan bildirimleriniz varsa @media, tüm bu kuralların geçerli olacağı konusunda uyarılmalıdır . Burada olan şey , her iki kuraldaki beyannamelerin birleşmesidir , @mediasadece ikincisinin birinciyi tamamen geçersiz kılması değil ...

Çakışmayı önlemek için medya sorgularını nasıl doğru bir şekilde aralıklandırırız?

Çakışmayı önlemek istiyorsanız, sadece birbirini dışlayan medya sorguları yazmanız yeterlidir.

min-Ve max-ön eklerinin "minimum kapsayıcı" ve "maksimum kapsayıcı" anlamına geldiğini unutmayın ; Bu araçlar (min-width: 20em)ve (max-width: 20em)hem tam 20em geniş değerinde bir görünüme eşleşir.

Görünüşe göre zaten bir örneğiniz var, bu da bizi son sorunuza getiriyor:

İnsanların kullandığını gördüm: 799px ve ardından 800px gibi şeyler, peki ya 799,5 piksel ekran genişliği? (Belli ki normal bir ekranda değil, retinada mı?)

Bundan tam olarak emin değilim; CSS'deki tüm piksel değerleri mantıksal piksellerdir ve bir görüntü alanı genişliği için kesirli bir piksel değeri bildirecek bir tarayıcı bulmakta zorlandım. Bazı iframe'leri denemeyi denedim, ancak hiçbir şey bulamadım.

İOS ikisinden biri sağlamak için tüm fraksiyonel piksel değerlerini yuvarlar benim deneylerden, Safari gibi görünüyor max-width: 799pxve min-width: 800pxmaç olacak viewport (görünüşte eski eşleşir) gerçekten 799.5px olsa bile.

¹ _{Bunların hiçbiri ne Koşullu Kurallar modülünde ne de Basamaklama modülünde açıkça belirtilmese de (sonuncusu şu anda yeniden yazma için planlanmıştır), teknik özellik herhangi bir şeye stilleri uygulamayı söylediği için kademenin normal şekilde gerçekleşmesi ima edilir. ve @mediatarayıcı veya medyayla eşleşen tüm kurallar.}

Burada tavsiye edildiği gibi denedim:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

ancak bunun iyi bir fikir olmadığını anladım çünkü şu anda Chrome'da ne Ubuntu masaüstümde ne de Android telefonumda çalışmıyor. (burada açıklandığı gibi: calc () medya sorguları içinde çalışmıyor ) Ama daha iyi bir yol buldum ...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

ve bam!

calc()bu (min-width: 50em and max-width: calc(50em - 1px)sorunu çözmek için kullanılabilir olabilir, doğru şekilde istiflenecektir), ancak zayıf tarayıcı desteği ve bunu önermem.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

Bilgiler:

• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc

Bazıları, embirimi kullanmamanın sorgu istiflemenize yardımcı olacağını belirtti.