Apa perbedaan antara "layar" dan "hanya layar" dalam kueri media?

Apa perbedaan antara screendan only screendalam pertanyaan media?

<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" />

Mengapa kita harus menggunakan only screen? Apakah screenitu sendiri tidak memberikan informasi yang cukup untuk ditampilkan hanya untuk layar?

Saya telah melihat banyak situs web responsif menggunakan salah satu dari tiga cara berikut:

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

@media (max-width:632px)

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

Mari kita uraikan contoh Anda satu per satu.

@media (max-width:632px)

Yang ini mengatakan untuk jendela dengan max-width632px yang ingin Anda terapkan gaya ini. Pada ukuran itu Anda akan berbicara tentang sesuatu yang lebih kecil dari layar desktop dalam banyak kasus.

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

Yang ini mengatakan untuk perangkat dengan screendan jendela dengan max-width632px menerapkan gaya. Ini hampir identik dengan yang di atas kecuali Anda menetapkan screensebagai lawan dari jenis media lain yang tersedia yang paling umum yang lain print.

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

Berikut ini adalah kutipan langsung dari W3C untuk menjelaskan yang ini.

Kata kunci 'hanya' juga dapat digunakan untuk menyembunyikan style sheet dari agen pengguna yang lebih tua. Agen pengguna harus memproses kueri media yang dimulai dengan 'hanya' seolah-olah kata kunci 'hanya' tidak ada.

Karena tidak ada jenis media seperti "hanya", style sheet harus diabaikan oleh browser lama.

Inilah tautan ke kutipan yang ditunjukkan pada contoh 9 di halaman itu.

Mudah-mudahan ini menjelaskan pertanyaan media.

EDIT:

Pastikan untuk memeriksa jawaban yang sangat bagus tentang bagaimana onlykata kunci ditangani.

Berikut ini dari Adobe docs .

Spesifikasi kueri media juga menyediakan kata kunci only, yang dimaksudkan untuk menyembunyikan kueri media dari browser lama. Seperti not, kata kunci harus muncul di awal deklarasi. Sebagai contoh:

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

Peramban yang tidak mengenali kueri media mengharapkan daftar jenis media yang dipisahkan koma, dan spesifikasinya mengatakan mereka harus memotong setiap nilai segera sebelum karakter nonalphanumeric pertama yang bukan tanda hubung. Jadi, browser lama harus menginterpretasikan contoh sebelumnya sebagai ini:

media="only"

Karena tidak ada tipe media seperti itu saja, stylesheet diabaikan. Demikian pula, browser lama harus menafsirkan

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

sebagai

media="screen"

Dengan kata lain, itu harus menerapkan aturan gaya ke semua perangkat layar, meskipun tidak tahu apa artinya pertanyaan media.

Sayangnya, IE 6–8 gagal mengimplementasikan spesifikasi dengan benar.

Alih-alih menerapkan gaya ke semua perangkat layar, ia mengabaikan lembar gaya sama sekali.

Terlepas dari perilaku ini, masih disarankan untuk mengawali kueri media hanya jika Anda ingin menyembunyikan gaya dari browser lain yang kurang umum.

Jadi, gunakan

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

dan

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

akan memiliki efek yang sama di IE6-8: keduanya akan mencegah gaya tersebut tidak digunakan. Namun, mereka masih akan diunduh.

Juga, di browser yang mendukung kueri media CSS3, kedua versi akan memuat gaya jika lebar viewport lebih besar dari 401pxdan jenis media adalah layar.

Saya tidak sepenuhnya yakin browser mana yang tidak mendukung kueri media CSS3 yang akan membutuhkan onlyversi tersebut

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

sebagai lawan

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

untuk memastikan itu tidak ditafsirkan sebagai

media="screen"

Ini akan menjadi tes yang bagus untuk seseorang dengan akses ke lab perangkat.

Untuk memberi gaya pada banyak ponsel cerdas dengan layar yang lebih kecil, Anda dapat menulis:

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

Untuk memblokir browser lama agar tidak melihat lembar gaya ponsel iPhone atau Android, Anda dapat menulis:

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

Baca artikel ini untuk lebih banyak http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Jawaban oleh @hybrid cukup informatif, kecuali itu tidak menjelaskan tujuan sebagaimana disebutkan oleh @ashitaka "Bagaimana jika Anda menggunakan pendekatan Mobile First? Jadi, kami memiliki mobile CSS terlebih dahulu dan kemudian menggunakan min-width untuk menargetkan situs yang lebih besar. Kita seharusnya tidak menggunakan satu-satunya kata kunci dalam konteks itu, bukan?

Ingin menambahkan di sini bahwa tujuannya hanya untuk mencegah browser yang tidak mendukung untuk menggunakan gaya perangkat lain seolah-olah itu dimulai dari "layar" tanpa itu akan membawanya ke layar di mana seolah-olah dimulai dari "hanya" gaya akan diabaikan.

Menjawab ashitaka pertimbangkan contoh ini

<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)" />

Jika kita tidak menggunakan "hanya" itu masih akan berfungsi karena gaya desktop juga akan digunakan untuk menyerang gaya android tetapi dengan overhead yang tidak perlu. Dalam hal ini JIKA browser tidak mendukung itu akan mundur ke Style-sheet kedua mengabaikan yang pertama.

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

screendi sini adalah untuk mengatur ukuran layar dari permintaan media. Misalnya lebar maksimum area tampilan adalah 480px. Jadi itu menentukan layar sebagai lawan dari jenis media lain yang tersedia.

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

only screen di sini digunakan untuk mencegah browser lama yang tidak mendukung permintaan media dengan fitur media dari menerapkan gaya yang ditentukan.