Web Responsive adalah desain tampilan web yang secara otomatis bisa berubah ukuran, menyembunyikan, mengecilkan, atau memperbesar, situs web, agar terlihat bagus di semua perangkat (desktop, tablet, dan smartphone).
Tambahan Elemen META
Langkah paling awal yang harus dilakukan dalam membuatnya adalah dengan elemen <meta>. Berikut ini adalah scriptnya:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tambahan Properti Width
Jika properti lebar CSS (width) diatur ke 100%, maka elemen html akan responsif mengikuti lebar di semua perangkat.
Biasanya kita sering menggunakan px, jika menggunakan px lebar elemennya terbatas.
Tambahan Max Properti
Ini adalah solusi yang lebih baik, dalam banyak kasus, adalah dengan menggunakan properti max-width.
Kita bisa mengatur lebar maksimal elemen html, jika elemen tersebut diakses oleh perangkat yang lebih kecil lebarnya dari ukuran maksimal, maka elemen tersebut mengecil mengikuti lebar maksimal perangkat tersebut.
Media Queries
Selain mengubah ukuran teks dan gambar, juga biasa menggunakan kueri media di halaman web yang responsif.
Dengan Media Queries, kita bisa menentukan style yang sama, tapi untuk ukuran browser yang beda tiap perangkat.
Sebagai contoh:
Mengubah ukuran jendela browser untuk melihat bahwa tiga elemen div di bawah ini akan ditampilkan secara horizontal pada layar besar dan ditumpuk secara vertikal pada layar kecil.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
*
{
box-sizing: border-box;
}
.kiri
{
background-color:coral;
padding: 20px;
float: left;
width: 20%;
/* lebarnya adalah 20%, secara default */
}
.tengah
{
background-color: gainsboro;
padding: 20px;
float: left;
width: 60%;
/* lebarnya adalah 60%, secara default */
}
.kanan
{
background-color: gold;
padding: 20px;
float: left;
width: 20%;
/* lebarnya adalah 20%, secara default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px)
{
.kiri,
.tengah,
.kanan
{
width: 100%;
/* lebarnya adalah 100%, when the viewport is 800px or smaller */
}
}
</style>
</head>
<body>
<h2>Media Queries</h2>
<p>Resize ukuran browser tiap perangkat yang berbeda.</p>
<div class="kiri">
<p>Konten Menu Kiri</p>
</div>
<div class="tengah">
<p>Konten Menu Tengah</p>
</div>
<div class="kanan">
<p>Konten Menu Kanan</p>
</div>
</body>
</html>
Dari script kode tersebut, maka akan menghasilkan tampilan berikut.
Saat webnya diakses oleh perangkat android, maka tampilannya akan berubah seperti ini.
Contoh Full Website
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Website</title>
<style>
*
{
box-sizing: border-box;
}
.menu
{
float: left;
width: 20%;
text-align: center;
}
.menu a
{
background-color: black;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: white;
}
.main
{
float: left;
width: 60%;
padding: 0 20px;
color: black;
}
.right
{
background-color:black;
float: left;
width: 20%;
padding: 15px;
margin-top: 7px;
text-align: center;
color: white;
}
@media only screen and (max-width:620px)
{
/* For mobile phones: */
.menu,
.main,
.right
{
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:black;padding:15px;text-align:center;color:white;">
<h1>Website</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
</div>
<div class="main">
<h2>Konten Utama</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="right">
<h2>Tentang</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div style="background-color:black;text-align:center;padding:10px;margin-top:7px;color:white;"> © copyright 2019</div>
</body>
</html>
Maka, beginilah hasilnya.
Saat tampil di browser perangkat android.
Demikianlah artikel kali. Selamat mencoba dan semoga bermanfaat.