tipe media screen yang aman dalam CSS mobile
Perbedaan antara ketiga deklarasi media query di CSS tersebut adalah sebagai berikut:
1. **@media (max-width: 480px)**:
- Ini adalah deklarasi media query yang sederhana dan paling umum digunakan.
- Ini berarti aturan CSS yang terkandung di dalamnya akan diterapkan ketika lebar viewport (layar) maksimum adalah 480 piksel atau kurang.
- Ini tidak memerlukan spesifikasi tipe media (misalnya "screen" atau "print"), sehingga akan diterapkan pada semua tipe media secara default jika tidak ada tipe media yang disebutkan.
2. **@media screen and (max-width: 480px)**:
- Ini adalah deklarasi media query yang mengkhususkan tipe media "screen," yang digunakan untuk layar monitor dan perangkat lainnya yang dapat menampilkan tampilan visual.
- Ini juga menggunakan kondisi lebar viewport maksimum adalah 480 piksel atau kurang.
- Dengan kata lain, ini hanya akan mempengaruhi aturan CSS pada tipe media "screen."
3. **@media only screen and (max-width: 480px)**:
- Ini adalah deklarasi media query yang lebih spesifik dan disarankan untuk digunakan.
- Ini menggabungkan tipe media "screen" dengan kata kunci "only," yang menghindari browser lama yang tidak mengenali media query yang tidak dikenali.
- Ini juga menggunakan kondisi lebar viewport maksimum adalah 480 piksel atau kurang.
- Ini akan mempengaruhi aturan CSS pada tipe media "screen" dan menjalankannya secara eksklusif.
@media only screen and (max-width: 480px) biasa digunakan ideal untuk tampilan 1 kolom
@media only screen and (max-width: 768px) biasa digunakan untuk tampilan 1 atau 2 kolom
Dalam prakteknya, banyak pengembang web lebih suka menggunakan `@media only screen and (max-width: 480px)` karena ini menghindari masalah kompatibilitas dengan browser lama dan merupakan pendekatan yang lebih aman dalam menentukan tipe media yang ditargetkan. Namun, ketiga deklarasi tersebut pada dasarnya memiliki tujuan yang sama, yaitu mengubah tampilan berdasarkan lebar viewport.