CSS özgüllüğü, Ortam Sorguları ve min-genişlik

Question

Blogumun duyarlı web tasarımı göz önünde bulundurularak yeniden tasarlanması ve "önce mobil" yönteminin kullanılması - Kısacası herhangi bir çoğaltmadan kaçınmak için min-width kullanmaya çalışıyorum veya css .. no display: yok vs ..

Sorunum, bir CSS değeri üzerine yazmam gerektiğinde, alt min genişliğinin öncelikli olmasıdır. Örnek: Bir 2.2em h2 almak için yukarıdaki 600px kararları yaşıyorum ve ne zaman

@media only screen and (min-width: 600px) { 
    h2 { font-size: 2.2em; } 
} 

@media only screen and (min-width: 320px) { 
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 
} 

ben beklediğiniz, ancak bunun yerine ben 2.2em beyanı olduğunu görüyoruz benim Dev araçlarında .. 1.7em olsun Orada, ama diğeri öncelikli .. Bu mantıklı değil!

Mini genişlikleri kullanmaya devam edebilir ve daha yüksek çözünürlüklerde, daha güçlü seçiciler veya maksimum genişlik kullanmadan, etkili bir şekilde beyanların üzerine yazabilir miyim?

Answer 1

Ben bir 2.2em h2 elde etmek için 600px ve üzeri çözünürlüklerde olduğumda beklerdim, ama bunun yerine 1.7em aldım .. Dev araçlarımda 2.2em bildiriminin olduğunu görüyorum ama diğeri öncelik kazanır .. Anlamsızdır!

Mantıklı. Medya min-width: 600px'u karşılarsa, o zaman min-width: 320px; Diğer bir deyişle, en az 600 piksel genişliğinde olan herhangi bir şey de en az 320 piksel genişliğindedir, çünkü 600 320'den büyüktür.

Her iki ortam sorgusu doğru olarak değerlendirildiği için, en son meydana gelen kural, kaskadta önceliklidir. Bu kodunuzu eşdeğeri: 2.2em geliştirici araçları görünür ama belirgin bir etkisi olmaz açıklıyor

h2 { font-size: 2.2em; } 
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 

.

en kolay düzeltme doğru sırayla etrafında çok Kurallarınızın kaskad sizin @media blok geçmektir:

@media only screen and (min-width: 320px) { 
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } 
} 

@media only screen and (min-width: 600px) { 
    h2 { font-size: 2.2em; } 
}