Di era mobile-first seperti sekarang, membuat website yang tampil baik di semua ukuran layar adalah keharusan. Media query CSS adalah teknologi kunci untuk mencapai hal tersebut. Dengan media query, kamu bisa menerapkan gaya CSS yang berbeda tergantung pada ukuran layar perangkat pengguna. Artikel ini menjelaskan cara menggunakannya dari awal dengan contoh nyata.
Apa Itu Media Query?
Media query adalah aturan CSS yang memungkinkan kamu menerapkan gaya tertentu hanya ketika kondisi tertentu terpenuhi, seperti lebar layar yang lebih kecil atau lebih besar dari nilai tertentu. Sintaks dasarnya menggunakan kata kunci @media.
Sintaks Dasar Media Query
/* Gaya ini hanya berlaku jika lebar layar maksimal 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Gaya ini hanya berlaku jika lebar layar minimal 1024px */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:
Cara Membuat Website Responsive dengan Media Query
Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.
Top comments (0)