Tingkat kesulitan : Easy
Bahasa Pemrograman : CSS
Penjelasan : Dalam mengatur desain sebuah website/blog, tentunya desainer web tidak bisa mendesain web nya hanya untuk device PC/laptop saja.
Device-device lain seperti Smartphone dan Tablet juga harus diperhitungkan dan dibuat desain nya tersendiri.
Karena itu, diperlukan 'pembeda' agar desain yang sejak awal diatur hanya untuk tampilan PC/laptop tidak muncul & bertabrakan dengan desain di tampilan smartphone / tablet.
Pembeda itu adalah @media.
Begini script nya :
CSS
<style type="text/css">
*{margin:0;padding:0;box-sizing:border-box;}
@media(max-width:1200px){
/* Hanya tampil di device Desktop */
#contohid{display: block;background-color: green} /* Script ini hanya berfungsi jika device memiliki ukuran maksimal 992px (ukuran maksimal layar LCD PC jaman sekarang) */
}
@media(max-width:992px){
/* Hanya tampil di device Laptop */
#contohid{display: block;background-color: blue} /* Script ini hanya berfungsi jika device memiliki ukuran maksimal 992px (ukuran normal device laptop jaman sekarang) */
}
@media(max-width:768px){
/* Hanya tampil di device Tablet */
#contohid{display: block;background-color: red} /* Script ini hanya berfungsi jika device memiliki ukuran maksimal 768px (ukuran maksimal normal device tablet jaman sekarang) */
}
@media(max-width:576px){
/* Hanya tampil di device Smartphone */
#contohid{display: block;background-color: pink!important} /* Script ini hanya berfungsi jika device memiliki ukuran maksimal 576px (ukuran maksimal normal device smartphone jaman sekarang) */
/* Diberi tanda !important hanya sebagai bukti bahwa bisa di override saja */
}
</style>Aturan
- @media harus diurut mulai dari yang terbesar-terkecil (atas-bawah).
- Jika CSS yang ditulis tidak aktif atau bekerja, berikan tanda override !important diakhir script.
Demo on Codepen
