CSS Media Query sederhana (utk responsive web)

Sample CSS media query yg paling sederhana. CSS media query biasanya dipakai utk responsive web, yaitu CSS yg bisa beradaptasi sesuai lebar screen browser.

HTML:

<style type="text/css">
.box, .box2 {
        background-color:#FCC;
        padding:1em;
}
 
@media (max-width: 900px) {
        .box {
                background-color:#CCF;
        }
}
 
@media (min-width: 500px) and (max-width: 900px) {
        .box2 {
                background-color:#CCF;
        }
}
 
@media (max-width: 499px) {
        .box2 {
                background-color:#CFC;
        }
}
</style>
<div class="box">
        My default color is red. I will turn blue if screen resolution is less than or equal to 900 px.
</div>
<div class="box2" style="margin-top:1em">
        My default color is red. I will turn blue if screen resolution is 500-900px, and will turn green if screen resolution is less than 500 px.
</div>

 

mencoba menyederhanakan , karena box2 akan menjadi hijau saat resolusi tepat 499px hingga kebawah maka css untuk mengatur box2 menjadi warna merah bisa di ikut sertakan pada max-width 900px tanpa membuat kondisi baru antara min-width 500px dan max-width 900px ... bisa di test