Beberapa perkara yang anda tahu semasa bekerja dengan unit viewport

David Chanin baru -baru ini menyerlahkan isu biasa apabila menggunakan Unit Viewport (VH dan VW) untuk saiz dan kedudukan elemen, terutamanya dalam pelayar mudah alih. Masalahnya timbul apabila menetapkan ketinggian elemen hingga 100vh dan kemudian meletakkan unsur kanak -kanak di bahagian bawah.

Ilustrasi menunjukkan bagaimana Chrome pada peranti mudah alih tidak mengambil kira bar alamat (krom penyemak imbas) apabila mengira 100vh . Ini mengakibatkan elemen bawah sebahagiannya dikaburkan di belakang bar alamat.

Pertimbangkan contoh ini:

<div>
  <button>Butang</button>
</div>

.full-page-element {
  Ketinggian: 100VH;
  Kedudukan: Relatif;
}

.full-page-elemen butang {
  Kedudukan: Mutlak;
  Bawah: 10px;
  Kiri: 10px;
}

Butang, yang dijangka dapat dilihat di bahagian bawah, tersembunyi kerana ketinggian bar alamat.

Penyelesaian yang sama untuk kandungan badan tinggi adalah:

 badan {
  Ketinggian: 100VH;
  Margin: 0;
}

Walau bagaimanapun, ini boleh menyebabkan ketidakkonsistenan dan melompat apabila bar alamat muncul dan hilang. Menggunakan height: 100% pada badan sahaja juga tidak boleh dipercayai kerana ketinggian badan bergantung pada kandungannya. Penyelesaian yang lebih mantap memerlukan penargetan html dan body :

 html, badan {
  Ketinggian: 100%;
}

Cabaran sebenar terletak pada unsur-unsur kedudukan di pinggir bawah bekas ketinggian penuh menggunakan position: absolute . Pendekatan ini bermasalah kerana ketinggian bekas yang berpotensi melebihi pandangan yang kelihatan.

Untuk navigasi bawah tetap, position: fixed; bottom: 0; Biasanya berfungsi dengan baik, kerana krom penyemak imbas dengan betul menyesuaikan kedudukannya.

Unit Viewport Horizontal ( vw ) membentangkan isu -isu yang sama kerana bar scrollars. 100vw dikira tanpa mempertimbangkan lebar scrollbar, yang membawa kepada menatal mendatar yang tidak dijangka.

Keperluan untuk pengendalian unit Viewport yang lebih baik telah sering dibangkitkan oleh pemaju, tetapi mengubah tingkah laku mereka dapat memecahkan penyelesaian yang ada. Ini menonjolkan kerumitan mencapai keserasian silang penyemak imbas yang konsisten dengan unit Viewport.

Atas ialah kandungan terperinci Beberapa perkara yang anda tahu semasa bekerja dengan unit viewport. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!