Bagaimanakah saya boleh menggunakan JavaScript untuk meniru unit vh dan vw dalam CSS3 untuk keserasian merentas pelayar?

Realisasi Dipertingkatkan Unit vh dan vw dalam CSS3 Menggunakan JavaScript

Pengenalan

CSS3 memperkenalkan unit panjang peratusan viewport, iaitu vh dan vw, untuk memudahkan susun atur responsif. Walau bagaimanapun, kefungsian yang bergantung kepada penyemak imbas ini tidak mempunyai keserasian merentas penyemak imbas, menyebabkan keperluan untuk penyelesaian alternatif.

Pelaksanaan JavaScript

Nasib baik, JavaScript menawarkan penyelesaian kepada kami. Dengan menukar nilai vh dan vw kepada piksel secara dinamik, kami boleh memastikan kefungsian lancar merentas pelayar. Untuk mencapai matlamat ini, kami boleh memanfaatkan jQuery dan melaksanakan pemalam yang memanipulasi gaya CSS dengan sewajarnya.

Butiran Fungsian

Pemalam jQuery yang disediakan memintas panggilan CSS dan menyemak vh dan unit vw. Jika unit tersebut dikesan, ia menukarnya kepada piksel berdasarkan dimensi port pandangan. Pada masa yang sama, ia mendaftarkan pendengar acara untuk tetingkap.mengubah saiz acara untuk sentiasa mengemas kini nilai piksel apabila port pandang berubah.

Penggunaan

Untuk menggunakan pemalam ini, masukkan sahaja dalam HTML anda dan gunakannya pada elemen yang dikehendaki. Sebagai contoh, untuk menetapkan ketinggian dan lebar elemen div kepada 50% daripada dimensi viewport, anda boleh menggunakan kod berikut:

$('div').css({ height: '50vh', width: '50vw' });

Pertimbangan Tambahan

• Pemalam ini menganggap konvensyen penamaan yang ketat untuk unit (vh dan vw).
• Untuk pelarasan saiz fon, penyelesaian memerlukan sokongan penyemak imbas khusus (tidak disediakan oleh semua penyemak imbas).
• Pendekatan ini mengutamakan fungsi berbanding ketepatan, yang mungkin mengakibatkan sedikit ketidaktepatan dalam kes yang melampau.

Kesimpulan

Walaupun pelaksanaan JavaScript ini mungkin bukan penyelesaian yang sempurna untuk semua kes, ia menyediakan cara praktikal untuk mencapai saiz relatif viewport dalam penyemak imbas yang tidak mempunyai sokongan asli untuk unit vh dan vw.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan JavaScript untuk meniru unit vh dan vw dalam CSS3 untuk keserasian merentas pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!