CSS Media Queries untuk Desktop, Tablet dan Mobile

CSS Media Queries merupakan kumpulan kode CSS yang akan mengatur Mobile Friendly dan Responsive sebuah template blogger.

Kode-kode ini bisa sobat gunakan dan berfungsi untuk memodifikasi berbagai tata letak (elemen) dari tampilan situs agar terlihat Mobile Friendly dan Responsive ketika di akses melalui smartphone, tablet dan komputer (laptop).

CSS Media Queries ini sudah lama saya dapatkan melalui situs Github oleh Gokul Krish. Sengaja tidak saya bagikan di blog ini karena sedang dalam masa membuat dan mengembangkan template blogger SEO Kraken.

CSS Media Queries untuk Desktop, Tablet dan Mobile

Berikut kode-kode CSS yang mengatur tampilan blog Mobile Friendly (Responsive/Adaptif) template blogger:

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  //CSS
}
/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  //CSS
}
/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  //CSS
}
/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  //CSS
}
/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  //CSS
}
/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
  //CSS
}

Jika ada bagian kode CSS yang kurang atau belum lengkap, silakan lengkapi di kolom komentar yang telah disediakan.

Tapi sih yaaa… saya rasa, kode CSS di atas sudah cukup lengkap.

Perlu sobat ketahui, hampir semua template blogger premium menggunakan kode CSS Media Queries di atas. Ok semoga berguna dan selamat memodifikasi template blogger.*