Solusi responsif h5 yang paling umum digunakan untuk terminal seluler dalam beberapa tahun terakhir adalah solusi rem. Hal ini memerlukan penghitungan ukuran font elemen root untuk mencapai daya tanggap.
Namun solusi ini juga memiliki kelemahan, yaitu ketika ukuran font bukan bilangan bulat, beberapa font menggunakan unit rem, yang akan menyebabkan masalah pada ukuran tampilan font. Hal ini masih memusingkan untuk pengembangan front-end untuk proyek dengan persyaratan restorasi visual yang tinggi.
Mengatasi respons front-end tidak lebih dari kemampuan untuk menampilkan secara normal pada perangkat yang berbeda. Di sini kami memperkenalkan solusi responsif yang tidak memerlukan metode rem. Gunakan px secara langsung. Yang kita bicarakan di sini adalah rancangan desain berdasarkan 750px. Berapa banyak piksel yang Anda ukur dalam rancangan desain?
Langsung tulis berapa px. Bukankah ini sangat cepat dan tidak memerlukan konversi rem?
Di sini kami sebenarnya menggunakan skala transformasi untuk menskalakan ukuran halaman guna mencapai daya tanggap.
Kode inti:
biarkan screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') biarkan halaman = document.getElementById(page); biarkan _scale = window.outerWidth/750; , 0 0); halaman.style.setProperty(transformasi, skala(+ _skala + )); //Kompatibel dengan ios8 halaman.gaya.setProperty(-webkit-transform-origin, 0 0); halaman.style.setProperty(-webkit-transfrom, skala(+ _scale + )); setTimeout(() => { halaman.style.setProperty(transformOrigin , 0 0); halaman.style.setProperty(transformasi, skala(+ _skala + )); //Kompatibel dengan ios8 page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); document.body.style.setProperty('visibilitas', 'terlihat ') }, 100); } screenMatch(); window.onresize = screenMatch;Pada kode di atas, node dengan id halaman adalah node awal dari seluruh elemen halaman dan elemen pertama di bawah badan. Di sini body/html perlu menyetel min-height:100%;height:100%;
Faktanya, kita juga dapat menggunakan unit px di program mini, tetapi akan ada beberapa bug font bergerigi saat menggunakan transformasi di program mini. Terakhir, kita hanya mengubah atribut zoom dan menggunakan -webkit-zoom untuk kompatibilitas. Kode inti tidak jauh berbeda dengan h5. Sama halnya dengan ukuran zoom.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.