CSS Ortam Sorguları Birbirini Geçersiz Kılma

Question

Yardım için Taşma Yığını Teşekkürler. Bir tasarımı sıkılaştırmak için kullanıyorum bazı özel css var. Ben iphone 6 için bir medya sorgusunda bir şey değiştirirseniz, bu değişiklik başka bir cihaz iPhone 5 diyor ki başka bir cihaz etkiler eğer bu konuya koşmaya devam ediyorum. Onun bu konu haline gelmekteydim ben sürekli olarak hiç görüş ile ayarlayarak vardı. İşte kullanıyorum @ web kırılma noktaları.

/* IPHONE 6 PLUS */ 
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

} 

/* IPHONE 6 */ 
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 

} 
/* IPHONE 5s */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

} 

/* IPAD LAYOUTS */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    } 


/* IPAD LANDSCAPE */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

Herhangi bir yardım büyük ölçüde uygun olabilir.

Answer 1

Birdman ile aynı fikirdeyim ve bir mobil ilk yaklaşımı düşünmelisiniz. Ancak, önce mobil cihaz, en küçük cihaz boyutunun, herhangi bir medya sorgusunun tamamen dışında olduğu anlamına gelir. Bir sonraki boyutta ilk medya sorgusu başlayacaktır. Sadece yeni bir genişliğe ihtiyacınız var, çünkü bu yeni stiller temel stillere ek olarak, bunların üzerine yazmaz. Oluşturulan her medya sorgusu, zaten arananlarla birleştirmeye devam edecektir.

Ve bu iPad hakkında endişelenmek yerine, ya da tablet ... tasarım öğelerinizin kötü görünmeye başladığı zaman endişeleniyor. Tüm büyük tarayıcılar, farklı cihaz boyutlarında test etmek için yeterince emülatöre sahiptir.

Artıları ve eksileri hakkında iyi bir makale. Bunu bilerek yapmadıkça :)

https://codemyviews.com/blog/mobilefirst

Answer 2

Bir aygıt genişliği, ortam sorgusunun aralığı arasında kaldığında, stil uygulanacaktır. Dolayısıyla, bir cihazın genişliği 500 pikselse, önce 6plus stiline sahip olur, bu daha sonra 6'ların stili, ardından 5'ler tarafından geçersiz kılınacaktır. Normal olarak, CSS'nizi belirli bir cihaz için uyarlamayı denemeniz tavsiye edilmez, ancak eğer isterseniz, aralıkların hiçbirinin üst üste gelmediğinden emin olmanız ya da en son hangi stilin geldiği ile geçersiz kılınmanız gerekir.