Petik.net - Dalam era digital yang serba canggih seperti sekarang, halaman web yang responsif sangatlah penting untuk memastikan pengalaman pengguna yang optimal. Halaman web responsif adalah halaman web yang dapat menyesuaikan tampilannya dengan berbagai ukuran layar yang berbeda, mulai dari layar ponsel hingga layar desktop. Salah satu cara untuk membuat halaman web responsif adalah dengan menggunakan media query.
Pengenalan media query
Media query merupakan teknik CSS yang memungkinkan kita untuk mengatur tampilan halaman web berdasarkan ukuran layar pengguna. Teknik ini sangat penting dalam pembuatan halaman web responsif yang dapat menyesuaikan tampilannya dengan berbagai ukuran layar, mulai dari layar ponsel hingga layar desktop.
Media query bekerja dengan mengecek ukuran layar pengguna dan menjalankan kode CSS khusus ketika ukuran layar mencapai nilai tertentu. Kita dapat menggunakan media query untuk mengubah ukuran font, warna latar belakang, posisi elemen, dan banyak lagi.
Contoh penggunaan media query untuk mengubah tampilan halaman web ketika ukuran layar mencapai 768 piksel atau lebih kecil adalah sebagai berikut:
@media only screen and (max-width: 768px) {
body {
background-color: yellow;
}
}
Dalam contoh di atas, kita menggunakan @media untuk menandakan bahwa kita menggunakan media query. Selanjutnya, kita menambahkan only screen untuk menandakan bahwa kita hanya ingin menerapkan CSS ini pada perangkat dengan layar.
Kemudian, kita menentukan ukuran layar maksimum yang kita inginkan dengan max-width: 768px. Akhirnya, kita menambahkan kode CSS yang ingin kita terapkan ketika media query dijalankan.
Menggunakan media query untuk mengatur tampilan halaman web
Untuk menggunakan media query, kita perlu menambahkan kode CSS khusus yang akan dijalankan ketika ukuran layar pengguna mencapai nilai tertentu. Kita dapat menggunakan media query untuk mengubah ukuran font, warna latar belakang, posisi elemen, dan banyak lagi.
Berikut adalah contoh penggunaan media query untuk mengubah warna latar belakang halaman web ketika ukuran layar mencapai 768 piksel atau lebih kecil:
@media only screen and (max-width: 768px) {
body {
background-color: yellow;
}
}
Dalam contoh di atas, kita menggunakan @media untuk menandakan bahwa kita menggunakan media query. Selanjutnya, kita menambahkan only screen untuk menandakan bahwa kita hanya ingin menerapkan CSS ini pada perangkat dengan layar.
Follow us on
