Saat melihat judul ini, mungkin Anda mengira ada kesalahan ketik lagi, desain ketinggian responsif? Apakah kamu serius? Karena "desain web responsif" biasanya memeriksa browser pada berbagai lebar dan ukuran perangkat. Kami biasanya menyesuaikan responsivitas horizontal dengan mengurangi lebarnya, namun saya jarang melihat pertimbangan responsivitas vertikal dengan mengurangi tinggi browser. Saat ini, Zhimimi mungkin mengalami sedikit gejolak di hatinya, dengan beberapa pertanyaan: Apakah kita perlu menurunkan ketinggian browser? Ya, mari kita terus membicarakannya.
Saat kita mendesain sebuah website, tidak baik membuat asumsi tanpa mengandalkan data aktual. Tanggung jawab pengujian horizontal dan vertikal juga sangat penting.
Bagi seorang desainer, anggapan yang tidak masuk akal menjadi salah satu faktor penting yang merusak sebuah desain website. Misalnya, asumsi bahwa pengguna harus menjelajahi situs web menggunakan lebar dan tinggi layar secara penuh adalah salah. Sebaliknya, kita perlu mempertimbangkan skenario terburuk.
Zhimi, apakah kamu mengerti? Kenyataannya adalah tidak semua pengguna menggunakan browser seperti yang kita harapkan. Saya menemukan bahwa situs web terlihat buruk ketika saya menurunkan ketinggian browser.
Mengubah ukuran browser (secara vertikal) bukan satu-satunya cara untuk mengubah ketinggian viewport. Saat kita membuka browser DevTools, itu juga akan menempati ketinggian browser.
Area panah pada gambar di atas mewakili ketinggian viewport saat ini. Untuk layar laptop yang lebih kecil, kita hanya akan melihat sebagian kecil halaman web.
Pertanyaan sebenarnya adalah: bisakah kita meningkatkan pengalaman pengguna ketika ketinggian area pandang lebih kecil? Ya, itu mungkin, mari kita lihat.
Sebagai desainer dan developer, sebagian dari kita hanya fokus pada perubahan lebar desain dan mengabaikan perubahan tinggi viewport. Misalnya, dalam pengembangan, UI menyediakan variasi komponen tertentu pada lebar area pandang yang berbeda. Namun bagaimana dengan ketinggian area pandang yang berbeda?
Pada gambar di atas, kita memiliki menu navigasi yang menyesuaikan berdasarkan ketinggian viewport. . Jika ukuran area pandang kecil (misalnya iPhone 5), item navigasi akan muncul sebagai kisi dua kolom. Cara berpikir seperti ini seringkali ditinggalkan, atau dioptimalkan hingga ada yang mengatakan sebaiknya dilakukan.
Ada dua cara berbeda untuk mencapai persyaratan di atas dalam CSS:
Kueri media vertikal Unit ViewportZhimimi pasti tahu cara menggunakan kueri media lebar di CSS.
@media (lebar minimum: 700 piksel) { .element { /* lakukan sesuatu.. */ }}Yang kurang umum digunakan adalah kueri media vertikal, yang memeriksa ketinggian area pandang.
@media (min-height: 500px) { .element { /* melakukan sesuatu.. */ }}/* atau */@media (orientasi: lanskap) { .element { /* melakukan sesuatu.. */ }}Menggunakan unit area pandang dapat membantu memberikan pengalaman yang lebih baik bagi pengguna. Misalnya, mengontrol jarak vertikal antar elemen berdasarkan ketinggian area pandang.
.hero__title { margin-bawah: kalk(10px + 5vh);}
Seperti yang ditunjukkan di atas, untuk layar yang lebih besar (seperti iMac 27 inci), margin bawah akan menjadi sangat besar. Kami memiliki dua cara untuk mengatasi masalah margin yang berlebihan.
Fungsi perbandingan CSS kueri mediaCara pertama (media queries) lebih didukung. Jika layarnya besar, kita perlu menetapkan nilai maksimum untuk margin bawah.
@media (lebar minimum: 2200 piksel) { .hero__title { margin-bawah: 40 piksel }}Metode lainnya adalah dengan menggunakan fungsi perbandingan penjepit() CSS. Fungsi dari fungsi penjepit() adalah mengembalikan rentang nilai.
.hero__title { margin-bawah: penjepit(10px, 5vh, 40px);}Dalam contoh ini, terdapat area bagian dengan bagian untuk judul dan ilustrasi, dan tinggi bagian sama dengan 100% tinggi area pandang.
Semuanya tampak baik-baik saja hingga ketinggian area pandang mengecil. Ketinggian bagian tidak akan cukup untuk menampung ilustrasi dan isi teks. Oleh karena itu, ini akan tumpang tindih dengan bagian lain pada halaman.
Perhatikan bagaimana ilustrasi tersebut tumpang tindih dengan bagian di bawah ini. Hal ini terjadi karena tersedianya ruang vertikal yang cukup. Lihatlah HTML dan CSS.
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- konten --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>css
.hero { tinggi: 100vh;}.hero__thumb { fleksibel: 0 0 550 piksel lebar: 550 piksel;}Berikut beberapa solusi untuk mengatasi masalah tersebut:
Tetapkan ukuran tetap (lebar dan tinggi) untuk ilustrasi, bukan hanya lebarnya, kurangnya tinggi akan terus menimbulkan masalah ini. tinggi: 100vh hanya jika tinggi area pandang lebih besar dari 700 piksel (nilai kueri media dapat bervariasi bergantung pada konteks).Kita dapat menggabungkan keduanya untuk mendapatkan solusi yang lebih ampuh.
.hero__thumb { lebar: 400 piksel; tinggi: 300 piksel; kesesuaian objek: berisi; /* Untuk menghindari kompresi gambar */}@media (tinggi minimum: 700 piksel) { .hero { tinggi: 100vh;Oke, sekarang kita sepakat bahwa menggunakan media queries vertikal lebih baik. Namun, menggunakan 100vh berisiko karena meskipun kami membatasi ukuran ilustrasi, kami mungkin tidak dapat melakukan hal yang sama pada konten teks. Jika isi teks menjadi lebih panjang maka masalah yang sama akan terjadi lagi, lihat gambar di bawah ini:
Untuk mengatasi masalah ini, kita dapat menggunakan min-height sebagai ganti tinggi. Dengan cara ini, jika kontennya bertambah panjang, tingginya akan melebar dan tidak tumpang tindih.
@media (tinggi minimum: 700 piksel) { .hero { tinggi minimum: 100vh; }}Menyematkan judul saat menggulir bukanlah hal yang buruk, namun kami ingin memastikan bahwa kami hanya menyematkan judul ketika ruang vertikal cukup baik sehingga pengalamannya bagus.
Ini adalah website tentang lanskap. Di sini kita dapat melihat bahwa jika ketinggiannya terlalu kecil, ketinggian yang tetap akan memakan banyak ruang secara keseluruhan. Apakah ini benar-benar penting bagi pengguna? Dalam kebanyakan kasus, ini tidak penting, karena rata-rata pengguna tidak akan memperkecil tampilan situs web seperti ini. Saat ini, jika kita ingin mengoptimalkan, kita bisa melakukannya. Idenya adalah menggunakan media query vertikal untuk mengubah posisi tetap menjadi posisi statis ketika dinilai tingginya kurang dari ketinggian tertentu.
@media (min-height: 700px) { .site-header { /* posisi: tetap atau posisi: lengket */ }}Saya memperhatikan pola ini di bilah navigasi Twitter.com. Idenya adalah untuk menggabungkan kueri media vertikal dengan pola Prioritas+.
Saat tinggi area pandang diubah ukurannya, elemen yang kurang penting (bookmark dan daftar) akan dihapus dan ditambahkan ke menu Lainnya, yang merupakan kasus penggunaan yang baik untuk kueri media vertikal.
.nav__item--secondary { tampilan: tidak ada;}@media (min-height: 700px) { .nav__item--secondary { tampilan: blok }}Jika situs web kita memiliki sidebar atau sidebar, ketika tinggi viewport kecil, kita dapat mengurangi jarak vertikal antara beberapa item navigasi, yang juga akan menyempurnakan desain keseluruhan.
Kita tahu bahwa kotak modal setidaknya harus berada di tengah secara horizontal. Namun, terkadang kita juga perlu memusatkannya secara vertikal. Biasanya kita menggunakan solusi berikut:
.modal__body { posisi: absolut; kiri: 50%; atas: 50%; transformasi: terjemahan(-50%, -50%);
Namun, ada masalah ketika konten menjadi panjang, modal akan memenuhi layar secara vertikal dan pengguna tidak dapat menggulirnya.
Ada beberapa alasan untuk situasi ini:
Kotak modal tidak memiliki tinggi dan modal berada di tengah secara vertikal (ini akan menyebabkan masalah terjadi lebih cepat)Ini css yang diperbaiki:
.modal__body { posisi: absolut; kiri: 50%; atas: 3rem; transformasi: terjemahanX(-50%); lebar: 500 piksel; tinggi maksimum: 500 piksel; (tinggi minimum: 700 piksel) { .modal__body { atas: 50%; transformasi: terjemahan(-50%, -50%);Perhatikan bahwa saya menggunakan min-height dan max-height. min-height adalah tentang menjaga modal tetap terlihat bagus meskipun kontennya pendek, max-height adalah tentang membatasi tingginya menggunakan nilai tertentu alih-alih menambahkan ketinggian tetap.
Saat merancang sebuah pengalaman, yang terbaik adalah memikirkan lebar dan tinggi. Mengubah ukuran browser Anda secara vertikal mungkin sedikit aneh, tetapi ada kelebihannya. Pada artikel ini, kami membahas pentingnya pengujian vertikal dan cara kami melakukan pengujian vertikal. Terakhir, kami mengusulkan beberapa contoh dan kasus penggunaan yang kami harap dapat bermanfaat bagi pengguna smartmi.
Di atas adalah tentang desain ketinggian pada halaman web responsif. Apakah Anda perlu menurunkan ketinggian browser? Untuk lebih jelasnya silahkan perhatikan artikel terkait lainnya di situs ini!