<HTML>
<HEAD>
<TITLE>Belajar HTML </TITLE>
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<HEAD>
<BODY>
<H1>Coba<H1>
</BODY>
</HTML>Tanpa viewport, beberapa browser di HP mungkin akan menampilkan isi halaman dengan ukuran yang lebih kecil. Saat menggunakan meta dan viewport kita bisa menyesuaikan tampilan halaman agar sesuai ukuran layar. Kita bisa membuat halaman sesuai dengan ukuran layar dengan atribut content yang nilainya "width=device-width, initial scale=1.0".
Media Query
Setelah menambahkan Meta dengan nama bernilai viewport, coba tambahkan Media Query dalam style CSS. Dengan media Query, kita bisa mengatur style CSS yang berbeda untuk masing-masing ukuran.
<HTML>
<HEAD>
<TITLE>Belajar HTML </TITLE>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<STYLE>
@media only screen and (max-width: 600px) {
.col-1 {width: 100%;}
.col-2 {width: 100%;}
.col-3 {width: 100%;}
.col-4 {width: 100%;}
}
@media only screen and (min-width: 600px) {
.col-1 {width: 50%;}
.col-2 {width: 50%;}
.col-3 {width: 50%;}
.col-4 {width: 50%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 25%;}
.col-2 {width: 25%;}
.col-3 {width: 25%;}
.col-4 {width: 25%;}
}
.row{
width:100%;
display:block;
}
[class*="col-"] {
float:left;
display:inline-block;
background:red;
height:100px;
}
</STYLE>
<HEAD>
<BODY>
<div class="row">
<div class="col-1">
<H1>Coba<H1>
</div>
<div class="col-2">
<H1>Coba<H1>
</div>
<div class="col-3">
<H1>Coba<H1>
</div>
<div class="col-4">
<H1>Coba<H1>
</div>
</div>
<div class="row">
<div class="col-1">
<H1>Coba1<H1>
</div>
<div class="col-2">
<H1>Coba2<H1>
</div>
<div class="col-3">
<H1>Coba3<H1>
</div>
<div class="col-4">
<H1>Coba4<H1>
</div>
</div>
</BODY>
</HTML>
Jika kalian menggunakan browser, coba ubah lebarnya dari full screen ke ukuran yang lebih kecil. Seharusnya, tampilannya akan menyesuaikan dengan ukuran browser. Kalau kalian pakai smartphone, hasilnya akan sesuai dengan ukuran layar smartphone kalian.
Orientasi layar
Tidak hanya berdasarkan ukuran browser atau layar perangkat yang digunakan, kita bisa juga menyesuaikan tampilan berdasarkan orientasi atau rasio ukuran windows.
<HTML>
<HEAD>
<TITLE>Belajar HTML </TITLE>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<STYLE>
@media only screen and (orientation: portrait) {
.col-1 {width: 100%;}
.col-2 {width: 100%;}
.col-3 {width: 100%;}
.col-4 {width: 100%;}
[class*="col-"] {
background:yellow;
}
}
@media only screen and (orientation: landscape) {
.col-1 {width: 50%;}
.col-2 {width: 50%;}
.col-3 {width: 50%;}
.col-4 {width: 50%;}
[class*="col-"] {
background:green;
}
}
.row{
width:100%;
display:block;
}
[class*="col-"] {
float:left;
display:inline-block;
height:72px;
box-sizing: border-box;
}
</STYLE>
<HEAD>
<BODY>
<div class="row">
<div class="col-1">
<H1>Coba<H1>
</div>
<div class="col-2">
<H1>Coba<H1>
</div>
<div class="col-3">
<H1>Coba<H1>
</div>
<div class="col-4">
<H1>Coba<H1>
</div>
</div>
<div class="row">
<div class="col-1">
<H1>Coba1<H1>
</div>
<div class="col-2">
<H1>Coba2<H1>
</div>
<div class="col-3">
<H1>Coba3<H1>
</div>
<div class="col-4">
<H1>Coba4<H1>
</div>
</div>
</BODY>
</HTML>
Kalau kalian mencoba mengubah ukuran browser atau menampilkan kode HTML tersebut di perangkat dengan ukuran yang berbeda, kalian akan melihat hasilnya. Pada contoh di atas, saya juga menambahkan "box-sizing:border-box" agar border masuk dalam perhitungan ukuran dari tampilan elemen HTML.
Jika kalian ingin lebih cepat dan mudah untuk membuat web yang responsif, kalian bisa mencoba framework CSS seperti Bootstrap, materialUI, dll.