Cara menyusun dan menempatkan kode CSS responsive dengan benar

Cara menyusun dan menempatkan kode CSS responsive dengan benar

  14 January    Andika

---

Kali ini saya ingin berbagi Cara menyusun dan menempatkan kode CSS responsive yang benar pada template. Menurut saya, ini lah penempatan kode CSS yang benar untuk tampilan responsive. Tapi saya tidak tahu, bagaimana dengan pendapat mereka yang sudah master dalam hal CSS.

Kode responsive pada template bisa di tandakan dengan element @media. Misalnya @media screen and (max-width:1024px). Settingan yang di tulis dalam lingkup element ini lah yang nantinya akan berperan dalam mengatur tampilan yang akan di tayangkan dalam resolusi layar maksimal 1024px.

Misalnya.

@media screen and (max-width:1024px){
setingan untuk tampilan dengan resolusi maksimal 1024px di tulis di sini.
}

Dari kebanyakan template yang saya lihat, kode untuk tampilan responsive ini tersebar tak beraturan pada kumpulan CSS utama. Kemaren, Saya melakukan uji coba pada blog percobaan. Biasanya, saya juga menempatkan kode CSS utama dan di ikuti CSS untuk tampilan responsive di bawahnya. Karena ingin susunan CSS template blog lebih rapi sekaligus menguji, maka saya mengelompokan kode CSS untuk tampilan responsive ini dalam satu urutan.

Awalnya saya hanya mengelompokan kode sesuai ukuran maksimal layar tanpa mengurutkan sesuai ukuran dan menempatkannya di bawah <style>. Setelah template di save, ternyata tampilannya amburadul.

Kemudian semua kode CSS responsive saya pindah dan tempatkan sebelum </style>. Hasilnya lumayan, namun masih ada sebagian element blog tidak bekerja dengan semestinya.

Akhirnya semua kode CSS saya susun mulai dari ukuran yang paling kecil, menengah dan terakhir ukuran paling besar. Dan ternyata ini juga tidak membuahkan hasil seperti yang saya harapkan. Tampilan sudah hampir sempurna, namun pada bagian tertentu masih terlihat cacat.

Akhirnya saya mengurutkan kode CSS responsive tersebut di mulai dari ukuran yang paling besar, menengah dan kecil. Hasilnya sangat memuaskan. Ternyata inilah cara menyusun kode CSS untuk tampilan responsive yang benar.

Jadi, kalau di gambarkan, posisinya kurang lebih seperti ini.

<style>
kode CSS utama

@media screen and (max-width:...px){
setingan untuk tampilan dengan resolusi paling besar di tulis di sini.
}

@media screen and (max-width:...px){
setingan untuk tampilan dengan resolusi menengah di tulis di sini.
}

@media screen and (max-width:...px){
setingan untuk tampilan dengan resolusi paling kecil di tulis di sini.
}
</style>

Jadi saya menganggap penulisan kode CSS untuk tampilan responsive seperti ini adalah benar karena hasil uji coba. Jika kamu ingin menerapkan langkah yang telah saya coba, silahkan. Namun jangan lupa, templatenya di back-up dulu ya. Lagian buat apa dalam sebuah CSS template terdapat 3 atau lebih CSS untuk tampilan responsive dalam ukuran maksimal yang sama.