1. Memasang Meta Tag Viewport
Meta Tag Viewport digunakan untuk mengatur lebar viewport dan skala awal yang ada pada perangkat mobile. Di bawah ini adalah contoh meta tag viewport. Sertakan meta tag ini di bagian
< head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Untuk Microsoft Internet Explorer 8 ke bawah tidak mendukung format di atas, anda bisa menggunakan bantuan
mediaqueries.js atau
respond.js dengan menambah kode berikut di bawah kode yang diatas.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Membuat Struktur HTML (Layout)
Langkahnya, kita akan membuat struktur HTML dengan
header, content, sidebar dan footer pada sebuah dokumen HTML.
Caranya adalah :
1. Buat
folder baru dengan
nama test pada komputer anda.
2. Selanjutnya di dalam
folder test buat lagi
folder baru dengan nama css.
3. Buka aplikasi notepad
4. Kemudian masukan kode di bawah ini kedalamnya
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo: Yudi Yusti</title>
<!-- alamat ke file css yang berada pada folder css -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/mediaqueries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js untuk IE8 kebawah -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Header</h1>
<p>Tutorial oleh <a href="http://yudiyusti.com">Yudi Yusti</a> (baca tutorialnya <a href="http://yudiyusti.com/">disini</a>)</p>
</div>
<div id="content">
<h2>Content</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<p>text</p>
<p>text</p>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div> <!--#pagewrap -->
</body>
<footer>
</footer>
</html>
5. Simpan ke
folder test dengan nama
index.html
6. Buka aplikasi notepad kembali dan buat dokumen baru lalu masukan kode di bawah ini kedalamnya.
body {
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
h1, h2, h3 {
color: #000;
}
h3 {
border-top: solid 1px #eee;
padding: 20px 0;
margin: 20px 0 0;
font-size: 150%;
}
p {
margin: 0 0 20px;
}
/* atur html5 elemen ke block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/************************************************************************************
STRUKTUR
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
#header, #content, #sidebar, #footer {padding:10px;}
/* anda bisa menghapus ini */
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #ccc;
}
.wrapper {
overflow: hidden;
}
7. Lalu simpan pada
folder css dengan
nama style.css
Untuk mencobanya anda bisa membuka
index.html dengan browser anda caranya dengan mengklik kanan pada file
index.html kemudian pilih open with -> nama browser anda. Rubah-rubah ukuran browser anda sampai ke ukuran terkecil, pasti masih belum responsif (layoutnya tidak mengikuti ukuran browser).
3. Membuat Media Query
Langkah membuat media query menggunakan CSS3, sama seperti di dalam bahasa pemograman dengan menggunakan kondisi (if), dimana CSS3 memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang telah di set lebarnya, sehingga halaman html flexible mengikuti layar browser.
Caranya:
1. Buka kembali aplikasi notepad
2. Kemudian buat dokumen baru
3. Masukan kode di bawah ini kedalamnya
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* Jika berukuran 980px atau kurang*/
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* Jika berukuran 700px atau kurang*/
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* Jika berukuran 480px atau kurang*/
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
4. Simpan dengan nama
mediaqueries.css ke dalam
folder css.
5. Selesai dan test kembali dengan membuka
index.html dengan browser anda kemudian rubah-rubah ukurannya.
