Media Queries adalah fitur CSS yang memungkinkan Anda menentukan aturan CSS berdasarkan ukuran layar dan media lainnya. Ini sangat berguna untuk membuat halaman web responsif yang dapat menyesuaikan diri dengan berbagai ukuran layar, seperti desktop, tablet, dan ponsel.
Untuk menggunakan Media Queries, Anda harus menentukan aturan CSS dalam @media rule dan menentukan kondisi ukuran layar. Berikut adalah contoh kode CSS untuk Media Queries:
@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
Dalam contoh di atas, kita menentukan bahwa jika ukuran layar lebih kecil dari 600px, maka elemen dengan kelas .container akan menggunakan arah kolom (flex-direction: column) daripada arah baris.
Dengan menggunakan Media Queries, Anda dapat menentukan tata letak halaman web yang berbeda untuk berbagai ukuran layar dan memastikan bahwa halaman web Anda terlihat baik pada semua perangkat.
0 Komentar