Media Queries: Media Features

Dalam Media Queries, Media Features memungkinkan pengaturan tampilan yang responsif dan disesuaikan dengan karakteristik layar dan perangkat pengguna. Berikut adalah beberapa fitur media dan contoh penggunaannya:

1. Orientasi Layar (orientation):

   • Deskripsi: Menentukan apakah layar berada dalam orientasi landscape (horisontal) atau portrait (vertikal).

   • Contoh Penggunaan:

     @media (orientation: landscape) {
       /* Aturan CSS saat layar dalam orientasi landscape */
     }

2. Ketinggian Viewport (max-height dan min-height):

   • max-height: Mengontrol ketinggian maksimum dari viewport.

     @media (max-height: 600px) {
       /* Aturan CSS saat ketinggian viewport tidak lebih dari 600px */
     }

   • min-height: Mengontrol ketinggian minimum dari viewport.

     @media (min-height: 400px) {
       /* Aturan CSS saat ketinggian viewport tidak kurang dari 400px */
     }

3. Lebar Viewport (max-width dan min-width):

   • max-width: Mengatur lebar maksimum dari viewport.

     @media (max-width: 768px) {
       /* Aturan CSS saat lebar viewport tidak lebih dari 768px */
     }

   • min-width: Mengatur lebar minimum dari viewport.

     @media (min-width: 480px) {
       /* Aturan CSS saat lebar viewport tidak kurang dari 480px */
     }

Dengan Media Features, pengembang dapat menciptakan tata letak dan gaya yang responsif, menghasilkan pengalaman pengguna yang lebih baik dan sesuai dengan berbagai ukuran dan orientasi layar.