Diskusi Muhammad Farid Rifki

Muhammad Farid Rifki
Ditanyakan pada: Membuat Responsive Navigation

media Query

halo ka, mau tanya

dalam kondisi apa kita menggunakan syntax ini di css ?

  • @media screen and (....) {}
  • @media (...) {}

apa bedanya dari kedua syntax diatas ya?

2 Jawaban

Bantu Jawab
Avatar
Muhammad Fakhry Burhanuddin

13 hari yang lalu

Keyword @media adalah rule yang akan mengaplikasikan isinya jika kriteria tipe device ditemukan. Tipe device yang dimaksud adalah "screen" dan "print".

Kalau penulisan @media tanpa disertai tipe device maka defaultnya adalah "all". Tipe device "all" mencakup "screen" dan "print".

Lebih jelasnya bisa lihat referensi dari MDN berikut https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Avatar
BroKoding

13 hari yang lalu

Halo kak, kedua syntax @media tersebut digunakan untuk membuat rule css yang hanya berlaku dalam kondisi tertentu, seperti ukuran layar atau mode pencetakan. Perbedaannya terletak pada cara mereka menentukan kondisi:

  1. @media screen and (...) {} digunakan untuk menargetkan layar atau perangkat tampilan, sementara @media (...) {} dapat menargetkan berbagai jenis kondisi, termasuk layar, mode pencetakan, atau fitur-fitur lainnya seperti orientasi layar atau resolusi.
  2. Syntax pertama, screen, secara khusus menargetkan layar perangkat, sementara syntax kedua dapat digunakan untuk menargetkan berbagai jenis media, termasuk layar, pencetakan, atau bahkan perangkat suara.