Responsive Website adalah website yang bisa beradapatasi dengan semua perangkat dengan berbagai macam luas screen. Sebelumnya saya harap pembaca sudah mengenal html dan css, karena kita akan membuat responsive website ini dengan HTML dan CSS.
»Menggunakan viewport pada HTML
Penggunaan viewport untuk melihat luas dari halaman website. Karena terkadang dalam suatu website memiliki luas yang tetap dan tidak muat pada layar yang kecil. Layar yang kecil ini dimaksud layar pada tablet atau handphone yang mengunjungi website.

tampilan dekstop

tampilan handphone
Alangkah lebih indah dan bagus bila menyesuaikan tampilan pada tiap layar baik layar pada handphone, tablet maupun yang lebih besar dari itu.
viewport dipasang pada tag header dalam suatu tag meta. sebagai contoh yakni
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ini akan menyatakan lebar sebuah layar perangkat.
»Menggunakan @media pada CSS
Media query ini memberi kemampuan browser untuk menggunakan css yang berbeda pada tiap lebar layar atau perangkat dan spesifikasinya agar menggunakan gaya yang sesuai.Contoh penggunaan @media yakni:
@media screen and (min-width: 800px) and (max-width: 1024px) { body { background-color: green; }}
pada kode css diatas menjelaskan tentang minimal lebar layar 800 piksel dan maksimal lebar layar 1024 piksel menggunakan warna background hijau.
Saya akan memberikan sebuah landing page yang menggunakan responsive desain ini.Kamu tinggal menyalin dan menempelnya pada suatu file baru dan menyimpanya dalam nama file responsive.html.
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ini contoh halaman responsive</title> <style> header { color: #FFFFFF; background-color: #284b63; padding: 80px 0; text-align: right; width: 100%; } section { padding: 40px 0; text-align: center; }.main { background: #FFFFFF; color: #000000; width: 75%; float: left; } .navigasi { background: #549da0; color: #FFFFFF; width: 25%; float: right; } footer { background: #353535; padding: 32px 0; text-align: center; color: #868686; }@media screen and (max-width:600px){ .main { width:100%; float:none; } .navigasi { width:100%; float:none; } }</style> </head> <body>
<header> Header</header>
<section class="main"> Main </section>
<section class="navigasi"> Navigasi </section>
<footer> footer </footer> </body></html>
Kode diatas akan berubah sesuai tampilan layar. Bila pengunjung menggunakan laptop atau komputer maka navigasi akan sejajar posisinya dengan main, bila dengan handphone maka navigasi akan ad adi bawah main.Untuk mendesain tampilan layar handphone atau biasanya tidak lebih dari 600piksel kita bisa menyetingya pada blok media kueri yang ada di bagian @media. Mudah bukan?Sekarang tampilan apapun pada perangkat apapun bisa kita perindah sesuai dengan ukuran layar perangkat yang mengunjungi website kita.
Terimakasih ilmunya mas
BalasHapussama2 suhu
HapusSekedar mampir, mantap infonya.
BalasHapusAda yg pake media, ada juga yang pake flexbox.
Ditunggu tutorial nya
ok gan..
Hapuswow ini dia artikel yg sudah lama saya cari..maksih kang artikelnya sangat bermanfaat sekali..
BalasHapussama2. mba..
Hapussemangat koding mantap
BalasHapusIlmu saya masih nol tentang koding 🙈
BalasHapusApalagi sya yg notabene rada gaptek 😂😂😁
BalasHapusah suhu bisa ajah klo merendah.
Hapusbtw sekarang blogger lagi susah upload foto..
BalasHapusfyi
sebenarnya upload foto tetap bisa masuk ke blogger tetapi tidak bisa langsung ke posting di postingan kita.
klo mau salah satu caranya pake html tag yakni img tag.
Gan, kalau masukin gambar ke postingan biar ukuran responsive gimana
BalasHapusEntahlah tentang koding T.T tapi makasih ilmunya mas
BalasHapusResponsif seperti ini dibutuhkan agar kecepatan web maksimal
BalasHapusPengen belajar banget bikin kya gini tpi ndak tau harus mulai dari mana dan harus belajar ke siapa
BalasHapusnih dari dulu aku juga bingung tentang ini, jadi merasa terbantu saat ini, makasih bang
BalasHapusKalo liat coding gtu pusing, tapi bs copas dan belajar darisini. Thank ya infonya.
BalasHapus