Buat Semua Responsif Kandungan Tertanam dengan Reframe.js
Bahagian yang paling rumit tentang membenamkan video semakin lebar & ketinggian betul. Nombor ini tentukan nisbah aspek dan apabila mereka mati, awak akan dapatkan pemain video wonky.
Ini adalah benar untuk semua unsur tertanam seperti iframes dan widget media sosial. Dan perkara-perkara ini boleh menjadi lebih rumit dengan reka bentuk responsif kerana mereka biasanya unsur tidak responsif.
Tetapi dengan Reframe.js, anda boleh buat sebarang elemen yang responsif untuk sebarang aspek aspek.
Ini mungkin salah satu plugin JS paling mudah tetapi paling berharga di web. Ia sebenarnya dicipta oleh Dolar Shave Club yang menghairankan mempunyai laman GitHubnya sendiri.
Reframe adalah salah satu daripada plugin percuma mereka dibina untuk pemaju yang mahukan cara yang lebih mudah mengendalikan kandungan tertanam responsif.
Pelakunya yang jelas adalah video terbenam dari laman-laman seperti YouTube dan Vimeo. Ia terkenal sukar untuk membuat elemen ini responsif tanpa hacks CSS.
Dengan Reframe.js, anda hanya pilih elemen apa sahaja yang anda mahu sasarkan dan reframe itu menggunakan reframe () fungsi.
Mulakan dengan menambah plugin Reframe.js ke halaman web anda. Awak boleh muat turun salinan dari GitHub, dan hanya 1KB sahaja.
Kemudian, anda hanya lulus fungsi pemilih untuk apa-apa elemen yang anda ingin ubah semula. Muatkan halaman dan ledakan! Anda sepatutnya bersedia.
Sebagai contoh, katakan anda mempunyai beberapa video yang tertanam di laman web anda. Awak boleh tambah kelas .video kepada embedding, dan menggunakannya sebagai pemilih. Reframe secara automatik menambah div dan kelas di sekelilingnya untuk mewujudkan gaya responsif.
Jadi anda Kod JavaScript akan kelihatan seperti ini:
reframe ('. video'); Betul betul?
Kod ini mensasarkan semua elemen dengan kelas .video dan menjadikan mereka responsif. Tiada hacks tambahan, tiada CSS tambahan. Memang tidak ada yang salah dengan menggunakan kaedah CSS tetapi anda perlu bungkus secara manual semua video terbenam dengan kelas tambahan.
Reframe saja menyelamatkan anda langkah tambahan dan membawanya semua dengan JavaScript. Untuk semak demo dan cari beberapa coretan kod asas, lawati laman web Reframe.js. Awak boleh muat turun salinan kod lurus dari repo GitHub.
