Halo, Habr! Saya hadir untuk Anda terjemahan artikel
"Pelajari desain web responsif dalam 5 menit" oleh Per.
Pada artikel ini, saya akan mengajari Anda banyak trik desain responsif dalam 5 menit. Ini jelas tidak cukup untuk studi yang tepat, tetapi di sini Anda akan menemukan ikhtisar metode paling penting berikut ini:
- Unit CSS Relatif
- Kueri media
- Flexbox
- Tipografi Responsif
Unit CSS Relatif
Desain web responsif didasarkan pada unit CSS relatif. Ini adalah unit yang mendapatkan nilainya dari beberapa nilai eksternal. Ini nyaman karena memungkinkan, misalnya, untuk skala secara proporsional lebar gambar relatif terhadap lebar jendela browser.
Unit relatif yang paling umum:
Di bagian ini, kita mulai dengan persentase% sebagai unit pengukuran, dan kemudian di bagian terakhir kita mempertimbangkan unit rem.
Katakanlah kita memiliki situs yang sangat sederhana seperti di bawah ini:
HTML-nya adalah sebagai berikut:
<body> <h1>Welcome to my website</h1> <image src="path/to/img.png" class="myImg"> </body>
Seperti yang Anda lihat dari GIF di bawah, gambar default kami akan memiliki lebar tetap:
Gambar tidak terlalu responsif, jadi mari kita ubah lebarnya menjadi 70%. Kami hanya menulis yang berikut ini:
.myImg { width: 70%; }
Ini menetapkan lebar gambar hingga 70% dari lebar elemen asli yang ditulis dalam tag. Karena tag menutupi seluruh lebar layar, gambar akan selalu 70% dari jendela browser itu sendiri.
Inilah hasilnya:
Sangat mudah untuk membuat gambar yang responsif.
Menggunakan kueri media untuk meningkatkan versi seluler situs
Kami memiliki satu masalah dengan tata letak responsif kami - terlihat aneh di layar yang sangat kecil. Lebar sama dengan 70% harus berkurang jika dilihat pada ponsel. Coba lihat sendiri:
Untuk membuat gambar terlihat lebih baik dalam hal ini adalah tugas hanya untuk permintaan media. Mereka memungkinkan Anda untuk menerapkan berbagai gaya, misalnya, tergantung pada lebar layar. Kita dapat menentukan bahwa jika lebar layar kurang dari 768px, maka kita perlu menggunakan gaya yang berbeda.
Inilah cara kami membuat kueri media dalam CSS:
@media (max-width: 768px) { .myImage { width: 100% } }
Blok CSS ini hanya akan diterapkan jika lebar layar kurang dari 768 piksel.
Inilah hasilnya:
Seperti yang Anda lihat, halaman memiliki breakpoint, di mana gambar menjadi lebih luas: ketika jendela browser 768px lebar, lebar gambar berubah dari 70% menjadi 100%.
Menu Navigasi Menggunakan Flexbox
Berikutnya adalah Flexbox. Anda tidak bisa memahami daya tanggap tanpa terlebih dahulu mengenal Flexbox. Ketika Flexbox diperkenalkan beberapa tahun yang lalu, ia mengubah desain responsifnya, karena modul ini memudahkan penempatan elemen di sepanjang sumbu.
Untuk menggunakan Flexbox, kami akan membuat situs kami sedikit lebih rumit dengan menambahkan menu navigasi di atas header. Inilah HTML untuk ini:
<nav> <a href="#">Home</a> <a href="#">About me</a> <a href="#">Contact</a> </nav>
Secara default, ini akan terlihat seperti ini:
Item menu kami bergeser ke kiri, tetapi ini bukan yang kita butuhkan. Kami ingin mereka disejajarkan secara rata di seluruh lebar halaman.
Untuk melakukan ini, kita cukup mengubah wadah menjadi flexbox, dan kemudian menerapkan properti sulap konten-justify.
nav { display: flex; justify-content: space-around; }
Mari kita cari tahu. Tampilan: flex berubah menjadi kotak yang fleksibel. Justify-content: space-around memberi tahu browser bahwa elemen di dalam wadah fleksibel harus memiliki ruang di sekelilingnya. Jadi browser ini mendistribusikan secara merata semua ruang yang tersisa di sekitar tiga elemen.
Ini tampilannya. Dan, seperti yang dapat Anda lihat, situs ini memiliki skala yang baik:
Tipografi Responsif: rem
Langkah terakhir adalah membuat tipografi kami responsif. Anda lihat, saya ingin menu navigasi dan judul menjadi sedikit lebih kecil ketika lebar layar kurang dari 768px (titik referensi kami, ingat?).
Salah satu cara untuk melakukan ini adalah mengurangi ukuran font dalam permintaan media, misalnya, sebagai berikut:
@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } }
Ternyata jauh dari sempurna. Aplikasi dapat memiliki beberapa titik kontrol dan banyak elemen (h2, h3, paragraf, dan sebagainya). Akibatnya, kita harus melacak semua elemen di semua breakpoint yang berbeda. Mudah ditebak bahwa ini akan menimbulkan kebingungan.
Namun, kemungkinan besar, mereka akan berhubungan satu sama lain kurang lebih sama pada titik kontrol yang berbeda. Misalnya, h1 akan selalu lebih dari satu paragraf.
Bagaimana jika ada cara untuk mengatur satu elemen dan kemudian membuat skala ukuran font lainnya relatif terhadap elemen itu?
Masukkan rem!
Rem pada dasarnya berarti nilai ukuran font yang Anda tetapkan untuk elemen Anda. Jenis berikut ini:
html { font-size: 14px; }</source , rem 14px. , rem. : <source lang="xml">h1 { font-size: 2rem; } nav { font-size: 1rem; }
Dan kemudian kita hanya mengubah nilai ukuran font untuk tag di dalam permintaan media kita. Ini akan memberikan ukuran font untuk elemen h1 dan nav kami.
Inilah cara kami mengubah nilai rem dalam kueri media:
@media (max-width: 768px) { html { font-size: 14px } }
Dan seperti itu, kami memiliki breakpoint untuk semua ukuran font kami. Perhatikan bagaimana ukuran font berubah ketika halaman melewati tanda 768-pixel:
Anda telah belajar cara menyesuaikan ukuran font, gambar, dan menu navigasi sehingga mereka merespons lebar halaman hanya dalam 5 menit. Ini bagus, karena Anda telah mengambil langkah pertama untuk menguasai keterampilan yang sangat berharga dalam membuat situs web yang responsif.
Pengodean yang bagus!