Bu, yalnızca @media ve ekran boyutu (320px) ve (maks-cihaz genişliği: 480px)

Question

Ne anlama geliyor? Bu, Wordpress Twenty Eleven teme's css dosyasında ne anlama geliyor? Web sitesi, ekran boyutları çeşitli uyum veya temelde, farklı cihazlara farklı stilleri sunmak için yardımcı yardımcı olacak bir tekniktir hangi CSS3 Media Queries denir

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Answer 1

. Eğer yeni olduğuna göre

, iki bölümden için medya sorgusu kırmasına izin: Bu, bir ekran ile bir cihaza css stilleri uygulamak anlamına gelir

@media only screen 

. only anahtar kelimesi, eski stil tarayıcılarındaki stil sayfalarını telefon stil sayfasının görünmesinden gizlemek için kullanılır.

and (min-device-width: 320px) and (max-device-width: 480px) 

Bu aygıt bir ekran minimum 320px ile boyut ve genişlik boyutunda 480px maksimum olduğunda belirtilen CSS sadece uygulanan anlamına geldiği açıktır.

Answer 2

Ortam sorguları belirtimi, yalnızca eski tarayıcılardan gelen medya sorgularını gizlemesi amaçlanan yalnızca anahtar kelimeyi de sağlar. Gibi değil, anahtar kelime beyanın başında gelmelidir. Örneğin: tanımaz

media="only screen and (min-width: 401px) and (max-width: 600px)" 

Tarayıcılar medya sorguları medya türlerinin virgülle ayrılmış listesini bekliyoruz ve şartname bir tire değil ilk alfanümerik olmayan karakterin hemen önce her değeri kesecek gerektiğini söylüyor.

media="only" 

Örnekler biri

@media (max-width:632px) 

biri ile gerçekleştirilen bu bir Uygulamak istediğiniz 632px bir max-genişlikte bir pencere için söylüyor: Yani, eski bir tarayıcı bu kadar yukarıdaki örneği yorumlayacağı bu tarzlar. Bu boyutta çoğu durumda bir masaüstü ekranından daha küçük bir şeyden bahsediyordunuz.

@media screen and (max-width:632px) 

Bu bir ekranı olan bir cihaz ve stil uygulamak 632px değerlerinin maksimum genişliğinde bir pencere için söylüyor. Bu, baskalarin en baska diger medya türlerinin aksine, ekrani belirtiyor olmaniz haricinde, yukaridaki ile hemen hemen aynidir.

daha küçük ekrana sahip birçok akıllı telefonlar için stil için

, yazabilirsiniz:

@media screen and (max-width:480px) { … } 

iPhone veya Android telefon stil sayfasını görmesini eski tarayıcıları engellemek için, yazabilirsiniz:

@media only screen and (max-width: 480px;) { … } 

Answer 3

Let en adım adım kodu anlamını anlamak:

Kodun oldu:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) 

Kural @media kuralı, farklı medya türleri/aygıtları için farklı stil kurallarını tanımlamak için kullanılır.

sadece anahtar kelime verilen stiller uygulayarak medya özellikleriyle medya sorgularını desteklemeyen eski tarayıcıları engeller. Modern tarayıcılarda etkisi yoktur. Eğer MDN website by clicking here kontrol edebilirsiniz

screen and (min-device-width: 320px) and (max-device-width: 480px) 

fazla rehberlik için:

ekran medya türüne medya özellikleri zincir olabilir, kimin minimum ve maksimum genişlik bilinen bir ekrana ve sahip cihazlara stilleri sınırlamak için