Selamat Pagi kawan, pada hari Minggu ini mimin akan berbagi tutorial yaitu belajar dasar Membuat website yang responsive.
Website responsive merupakan cara untuk menjadikan layout website dapat secara otomatis sesuai dengan layar pengguna.
Nah tujuan utama dari website responsive ialah untuk meningkatkan kenyamanan para pengunjung atau pembaca web kita, coba aja kalau website kita berantakan ketika di akses lewat mobile pasti orang akan lari dari website kita.
Apa itu Desain Web Responsif?
Desain Web Responsif adalah tentang menggunakan HTML dan CSS untuk mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar situs web secara otomatis, agar terlihat bagus di semua perangkat (desktop, tablet, dan ponsel):
Website responsive adalah sebuah website yang dapat menyesuaikan tampilannya sesuai dengan ukuran layar yang digunakan oleh pengunjung. Ini artinya, website tersebut akan terlihat baik di layar komputer, tablet, atau smartphone, tanpa harus menambahkan versi website yang berbeda untuk setiap perangkat.
Membut website menjadi responsive
Untuk membuat sebuah website responsive, Anda dapat menggunakan CSS (Cascading Style Sheets). CSS memiliki beberapa fitur yang berguna untuk mengatur tampilan website sesuai dengan ukuran layar, seperti grid layout dan flexbox. Dengan menggunakan fitur-fitur ini, Anda dapat membuat sebuah website yang dapat menyesuaikan tampilannya sesuai dengan ukuran layar yang digunakan oleh pengunjung.
Tambahkan dibagian head di dalam script html anda, Ini akan menyetel viewport halaman Anda, yang akan memberikan instruksi browser tentang cara mengontrol dimensi dan penskalaan halaman.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Membuat Gambar Menjadi Responsive
Gambar responsif adalah gambar yang diskalakan dengan baik agar sesuai dengan ukuran browser apa pun.
Jika properti CSS width diatur ke 100%, gambar akan responsif dan naik turun:
<img src="instech.jpg" style="width:100%;">
Ukuran Teks Yang Responsif
Membuat ukuran text dengan satuan vw bukan px
karena dengan vw (view width) akan menyesuaikan ukuran text terhadap lebar layar
<h1 style="font-size:10vw">Hello World</h1>
Menggunakan media query
Selain itu, Anda juga dapat menggunakan media query di dalam CSS untuk mengatur tampilan website sesuai dengan ukuran layar. Media query memungkinkan Anda untuk menuliskan aturan CSS yang hanya akan diterapkan jika ukuran layar memenuhi kriteria yang ditentukan. Dengan menggunakan media query, Anda dapat mengatur tampilan website sesuai dengan ukuran layar yang spesifik, seperti tampilan yang khusus untuk smartphone atau tampilan yang khusus untuk layar lebar.
Media @Query
Untuk mengatur css ketika halaman pada ukuran tertentu
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}