Selama ini Saya pikir problem yang sering terjadi yaitu mereka ingin membuat tema responsif tetapi masih belum begitu mengerti/merasa pusing dengan media queries. Berikut ini Saya telah membuat dua buah tema dasar Blogger dengan media queries yang Saya buat dari kerangka Minima dengan tampilan sesederhana mungkin. Harapan Saya kalian dapat dengan bahagia hati memodifikasi tema ini tanpa harus merasa pusing terhadap media queries:
Seiring berjalannya waktu, lama-kelamaan niscaya kalian akan segera mengerti :)
Fitur
Kerangka dasar HTML5. Ya, begitulah kira-kira:
<div id='outer-wrapper'> <header id='header-wrapper'> <h1>Lorem Ipsum</h1> </header> <nav id='nav'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Archive</a></li> <li><a href='#'>Comments</a></li> </ul> </nav> <div id='main-wrapper'> <article class='post hentry'> ... </article> </div> <aside id='sidebar-wrapper'> ... </aside> <footer id='footer-wrapper'> ... </footer> </div>Media queries sederhana untuk ukuran layar 740 piksel dan 570 piksel:
@media screen and (max-width:1024px) { #outer-wrapper {width:100%;} } @media screen and (max-width:740px) { #main-wrapper, #sidebar-wrapper { float:none; display:block; width:auto; padding:5%; } #sidebar-wrapper .widget-content { margin:0 0 10px; padding:0; } } @media screen and (max-width:570px) { #header h1 {font-size:170%;} }Internet Explorer dan Firefox akan menampilkan lebar elemen dengan sangat sempurna (mungkin semacam pembulatan). Namun Chrome dan Opera tampaknya mempunyai peraturan yang cukup ketat mengenai persentase. Saya sengaja memberi warna yang berbeda-beda pada setiap blok elemen untuk melihat penyimpangan yang terjadi. Coba buka blog-blog tersebut pada browser yang berbeda dan perhatikan celah-celah yang muncul pada sisi-sisi sidebar dan artikel.
Cara termudah untuk mengatasi itu yaitu dengan menyamakan semua warna kolom sehingga celah tidak akan tampak menggaris.