Selama ini Saya pikir masalah yang sering terjadi adalah mereka ingin menciptakan tema responsif tetapi masih belum begitu mengerti/merasa pusing dengan media queries. Berikut ini Saya telah membuat dua buah tema dasar Bloggerdengan media queries yang Saya buat dari kerangka Minima dengan tampilan sesederhana mungkin. Harapan Saya kalian bisa dengan senang hati memodifikasi tema ini tanpa harus merasa pusing terhadap media queries:
Seiring berjalannya waktu, lama-kelamaan pasti 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 tepat (mungkin semacam pembulatan). Namun Chrome dan Opera sepertinya memiliki 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 adalah dengan menyamakan semua warna kolom sehingga celah tidak akan tampak menggaris.
EmoticonEmoticon