Apa itu Desain Web Responsif?
Desain web responsif dapat membuat halaman web kita terlihat bagus di semua perangkat.
Desain web responsif hanya menggunakan HTML dan CSS.
Desain web responsif bukanlah program atau JavaScript.
Merancang Web Untuk Pengalaman Terbaik Semua Pengguna
Halaman web dapat dilihat menggunakan berbagai perangkat: desktop, tablet, dan telepon. Halaman web kita akan terlihat bagus, dan mudah digunakan, apa pun perangkatnya.
Halaman web tidak boleh meninggalkan informasi agar sesuai dengan perangkat yang lebih kecil, melainkan menyesuaikan kontennya agar sesuai dengan perangkat apa pun. Hal ini disebut desain web responsif saat kita menggunakan CSS dan HTML untuk mengubah ukuran, menyembunyikan, mengecilkan, memperbesar, atau memindahkan konten agar terlihat bagus di layar mana pun.
Contoh :
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class = "row"> <div class = "col-3 col-s-3 menu"> <ul> <li> Penerbangan </li> <li> Kota </li> <li> Pulau </li> <li> Makanan </li> </ul> </div> <div class = "col-6 col-s-9"> <h1> Kota </h1> <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p> </div> <div class = "col-3 col-s-12"> <div class = "disamping"> <h2> Apa? </h2> <p> Chania adalah sebuah kota di Pulau Kreta. </p> <h2> Dimana? </h2> <p> Kreta adalah pulau Yunani di Laut Mediterania. </p> <h2> Bagaimana? </h2> <p> Kita bisa mencapai bandara Chania dari seluruh Eropa. </p> </div> </div> </div> <div class = "footer"> <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p> </div> </body> </html>
