Medya sorgularında “ekran” ve “sadece ekran” arasındaki fark nedir?

Arasındaki fark nedir screenve only screenmedya sorguları?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Neden kullanmamız gerekiyor only screen? Does screenkendisi işlenecek yeterli bilgi sağlamaz sadece ekran için?

Bu üç farklı yoldan birini kullanarak çok sayıda duyarlı web sitesi gördüm:

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

@media (max-width:632px)

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

Örneklerinizi birer birer yıkalım.

@media (max-width:632px)

Bu, max-widthbu stilleri uygulamak istediğiniz 632px'lik bir pencere için söylüyor . Bu boyutta çoğu durumda bir masaüstü ekranından daha küçük bir şeyden bahsediyorsunuz.

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

Bu, bir screenve max-width632px'lik bir pencere stili olan bir cihaz için stili uygular. Bu, yukarıdakilerle neredeyse aynıdır, ancak mevcut diğer medya türlerininscreen aksine , en yaygın olanıdır .print

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

İşte bunu açıklamak için doğrudan W3C'den bir alıntı.

'Yalnızca' anahtar kelimesi, eski sayfa aracılarından stil sayfalarını gizlemek için de kullanılabilir. Kullanıcı aracıları, 'only' anahtar kelimesi yokmuş gibi 'only' ile başlayan medya sorgularını işlemelidir.

"Yalnızca" gibi bir ortam türü olmadığından, stil sayfası eski tarayıcılar tarafından yok sayılmalıdır.

İşte o sayfada örnek 9'da gösterilen alıntıya bağlantı .

Umarım bu medya sorgularına biraz ışık tutar.

DÜZENLE:

Anahtar kelimenin gerçekten nasıl ele alındığı konusunda @hybrids mükemmel yanıtını kontrol ettiğinizden emin olun only.

Aşağıdakiler Adobe belgelerinden alınmıştır .

Medya sorguları belirtimi only, medya sorgularını eski tarayıcılardan gizlemeyi amaçlayan anahtar kelimeyi de sağlar . Gibi not, anahtar kelime beyanı başında gelmelidir. Örneğin:

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

Medya sorgularını tanımayan tarayıcılar, virgülle ayrılmış bir medya türü listesi bekler ve belirtim, tire olmayan ilk alfasayısal olmayan karakterden hemen önce her bir değeri kısaltmaları gerektiğini söylüyor . Yani, eski bir tarayıcı gerektiğini bu şekilde yukarıdaki örneği yorumlamak:

media="only"

Yalnızca böyle bir ortam türü olmadığından, stil sayfası yok sayılır. Benzer şekilde, eski bir tarayıcı gerektiğini yorumlamak

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

gibi

media="screen"

Başka bir deyişle, medya sorgularının ne anlama geldiğini bilmese de, stil kurallarını tüm ekran cihazlarına uygulamalıdır.

Ne yazık ki, IE 6-8 belirtimi doğru şekilde uygulayamadı.

Stilleri tüm ekran cihazlarına uygulamak yerine stil sayfasını tamamen yok sayar.

Bu davranışa rağmen, medya stillerini yalnızca stilleri daha az yaygın olan diğer tarayıcılardan gizlemek istiyorsanız önceden eklemeniz önerilir.

Yani,

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

ve

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

IE6-8'de aynı etkiye sahip olacaktır: her ikisi de bu stillerin kullanılmasını önleyecektir. Ancak yine de indirilecekler.

Ayrıca, CSS3 ortam sorgularını destekleyen tarayıcılarda, görünüm alanı genişliği daha büyükse 401pxve ortam türü ekransa, her iki sürüm de stilleri yükler .

CSS3 medya sorgularını desteklemeyen tarayıcıların onlysürüme ihtiyacı olacağını tam olarak bilmiyorum

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

aksine

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

olarak yorumlanmadığından emin olmak için

media="screen"

Cihaz laboratuvarına erişimi olan biri için iyi bir test olacaktır.

Daha küçük ekranlı birçok akıllı telefon için stil oluşturmak için şunları yazabilirsiniz:

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

Eski tarayıcıların bir iPhone veya Android telefon stil sayfası görmesini engellemek için şunu yazabilirsiniz:

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

Daha fazla bilgi için bu makaleyi okuyun http://webdesign.about.com/od/css3/a/css3-media-queries.htm

@Hybrid tarafından verilen cevap oldukça bilgilendiricidir, ancak @ashitaka tarafından belirtilen amacı açıklamamaktadır. "Önce Mobil Önce yaklaşımını kullanırsanız? Önce mobil CSS'ye sahibiz, sonra daha büyük siteleri hedeflemek için minimum genişliği kullanırız. Bu bağlamda tek anahtar kelimeyi kullanmamalıyız, değil mi? "

Burada amacın, destekleyici olmayan tarayıcıların diğer cihaz stilini "ekrandan" başlıyormuş gibi kullanmasını önlemek olduğunu, "yalnızca" stilden başlıyormuş gibi ekranın göz ardı edileceği yere eklemek olduğunu eklemek isteriz.

Ashitaka'ya cevap vermek bu örneği düşünün

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

Eğer "sadece" kullanmazsak, yine de masaüstü tarzı olarak da işe yarayacak, aynı zamanda çarpıcı android stilleri de kullanılacaktır, ancak gereksiz ek yük ile. Bu durumda bir tarayıcı desteklemiyorsa, birincisini yok sayarak ikinci Stil sayfasına geri döner.

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

screenburada medya sorgusunun ekran boyutunu ayarlamak içindir. Görüntüleme alanının maksimum genişliği 480 pikseldir. Bu nedenle, ekranı diğer mevcut medya türlerinin aksine belirtiyor.

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

only screen burada, medya özelliklerine sahip medya sorgularını desteklemeyen eski tarayıcıların belirtilen stilleri uygulamalarını engellemek için kullanılır.