Hallo teman-teman, Bertemu lagi pada tutorial dumet school, pada artikel kali ini kita akan belajar sedikit tentang media queries pada css3, mungkin teman-teman ada yang sudah faham dan ada pula yang belum faham tentang media queries.
Fungsi dari media queries tersebut adalah Mengubah style berdasarkan lebar dan tinggi yang kita tentukan biasanya di pakai oleh web designer untuk membuat halaman website responsive, dengan ketentuan resolusi yang kita inginkan.
oke mungkin kita langsung saja praktek, kita akan membuat background berubah warna ketika di resolusi yang kita tentukan dengan media queries, oke teman-teman bisa buat sebuah file dan ketikan script berikut :
<!DOCTYPE html> <html> <head> </head> <body> <h1>Welcome To Dumet School</h1> <p>Terbaik Dan Nomor Satu.</p> </body> </html>
Nah sekarang silahkan tambahkan style cssnya, disini saya menggunakan css internal, silahkan ketikan script berikut :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
@media screen and (max-width: 480px) {
body {
background-color: aqua;
}
}
</style>
</head>
<body>
<h1>Welcome To Dumet School</h1>
<p>Terbaik Dan Nomor Satu.</p>
</body>
</html>
Script di atas menjelaskan tag atau element body yang berwarna abu-abu pada kondisi normalnya, dan saya menambahkan script media screen dengan ukuran max-width 480px background berwarna aqua, jadi pada kondisi screen layar 480px backgroundnya berubah warna menjadi aqua,
hasilnya seperti berikut :
pada ukuran layar 480px akan seperti berikut :
oke cukup simple kan teman-teman, silahkan mencoba, semoga bermanfaat.