Cara membuat CSS khusus untuk tampilan web mobile

Saya ingin contohkan jika anda punya halaman web dimana dalam halaman web tersebut terdapat sebuah gambar yang berada dalam div tertentu. Misalkan kode html nya seperti ini:

<div class="gambar"><img src="web-mobile.jpg"></div>

Jika dibuka pakai laptop gambar tersebut tampil. Nah bagaimana jika kita ingin kalau dibuka pakai perangkat mobile gambarnya tidak tampil? Caranya sangat mudah. Anda bisa menggunakan kode CSS berikut ini:

@media screen and (max-device-width: 480px) {
   .gambar{display:none;}
}

Dengan menambahkan kode CSS seperti ini maka gambar yang ada dalam class gambar diatas tidak akan tampil jika dibuka dengan perangkat mobile. Hal ini juga berlaku untuk jenis selector CSS lainnya. Misal anda ngin jika dibuka dari perangkat mobile maka ukuran hurufnya 12px tapi jika diakses dari perangkat laptop atau computer ukuran hurufnya 14px dan sebagainya. Jadi anda dapat mengatur sendiri konten apa saja yang bisa dikasih ke pengunjung sesuai dengan jenis perangkatnya apakah mobile atau bukan. Caranya anda tinggal tambahkan kode CSS dibawah

.gambar{display:none;}

jadi tetap dalam

@media screen and (max-device-width: 480px) {
   /* kode cs */
}