Bagaimana untuk Membuat Unit vh dan vw Berfungsi Merentasi Pelayar?

Penyelesaian JavaScript Penyemak Imbas Rentas untuk Unit vh dan vw

Pengenalan

CSS3 memperkenalkan unit panjang peratusan paparan, vh dan vw, untuk susun atur responsif. Walau bagaimanapun, unit ini tidak disokong sepenuhnya merentas penyemak imbas. Dalam artikel ini, kami meneroka alternatif JavaScript/jQuery untuk menjadikan vh dan vw berfungsi dalam persekitaran merentas pelayar.

Pendekatan Plugin jQuery

Pendekatan ini melibatkan penciptaan Pemalam jQuery yang menukar nilai vh dan vw kepada nilai piksel berdasarkan saiz port pandangan. Pemalam kemudian menggunakan nilai piksel ini pada elemen yang dikehendaki. Ini memastikan bahawa dimensi elemen dikekalkan apabila port pandang berubah.

Contoh Penggunaan

Untuk menggunakan pemalam, anda boleh menggunakannya pada elemen menggunakan .css( ) kaedah:

<code class="javascript">$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});</code>

Sokongan Penyemak Imbas

Pemalam telah diuji dan didapati berfungsi dalam penyemak imbas berikut:

• Chrome
• Firefox
• Safari
• Internet Explorer 9
• Opera

Nota tentang Saiz Fon

Walaupun vh dan vw boleh digunakan untuk saiz fon dalam pemalam, adalah penting untuk ambil perhatian bahawa penskalaan saiz fon mungkin berbeza antara penyemak imbas disebabkan perbezaan pemaparan fon.

Kesimpulan

Pemalam jQuery ini menyediakan penyelesaian yang boleh dipercayai untuk menggunakan unit vh dan vw dalam persekitaran silang pelayar. Ia memastikan elemen mengekalkan dimensi yang dimaksudkan apabila saiz port pandang berubah, menjadikannya alat penting untuk mencipta reka letak responsif.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Unit vh dan vw Berfungsi Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!