Pengenalan Desain Responsif - Bantuan Webflow
Pelajari bagaimana reflowing konten, ukuran tetap, ukuran relatif, dan breakpoint (media queries) membantu menciptakan desain responsif.
Ketika Anda mengunjungi situs di perangkat seluler, Anda mungkin melihat versi desktop situs yang dipadatkan ke layar yang lebih kecil—memaksa Anda untuk memperbesar dan menggeser untuk melihat konten. Anda juga mungkin menemukan versi seluler yang kurang lengkap yang tidak memiliki konten dan pengalaman yang membuat versi desktop lebih unggul. Namun, semoga Anda melihat situs web responsif—desain yang mengalir ulang dan memposisikan ulang konten berdasarkan lebar browser.
Ada tiga aspek berbeda dari desain responsif yang akan kita bahas di sini:
- Reflowing konten
- Ukuran tetap
- Ukuran relatif
- Breakpoints (media queries)
Reflowing Konten
Reflowing konten mengacu pada konten yang menyesuaikan lebarnya berdasarkan lebar viewport browser. Misalnya, paragraf dengan pengaturan default akan secara otomatis membungkus kontennya saat lebar browser mengecil. Perilaku ini dapat ditiru dengan menyeret tepi kanvas Designer.
Ukuran Tetap
Ukuran Relatif
Ini mengacu pada pengaturan ukuran elemen relatif terhadap hal lain seperti lebar browser atau elemen induk. Misalnya, daripada menggunakan ukuran berbasis piksel untuk gambar, pertimbangkan untuk menggunakan unit yang berbeda seperti %, VW (lebar viewport), atau VH (tinggi viewport). Jika Anda menggunakan % pada gambar dan menyesuaikan lebar browser, Anda dapat melihat bahwa gambar akan menyesuaikan dengan tepat sementara gambar berbasis px tidak akan.
Breakpoint
Tata letak biasanya jauh lebih kompleks daripada mengelola lebar satu gambar. Menggunakan breakpoint (juga dikenal sebagai media query) memungkinkan Anda tidak hanya menguji pengalihan konten, tetapi juga memodifikasi desain dan tata letak berdasarkan rentang lebar perangkat yang berbeda.
Pelajari lebih lanjut: