Penjelasan mendetail tentang metode adaptasi tata letak rem halaman HTML5

Metode utamanya adalah:

1. Menghitung dan mengatur ukuran font tag akar HTML secara dinamis sesuai dengan rasio rancangan desain terhadap lebar perangkat;
2. Di css, lebar, tinggi, posisi relatif, dll. dari elemen rancangan desain diubah menjadi nilai dalam satuan rem sesuai dengan proporsi yang sama;
3. Font dalam draf desain menggunakan px sebagai unitnya dan sedikit disesuaikan melalui media queries.

Versi umum yang disederhanakan:

 !(function(win, doc){ function setFontSize() { // Mendapatkan lebar jendela // Beginilah cara zepto mengimplementasikan $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' ; // Membatasi lebar di atas 640 memerlukan css untuk mencocokkan ukuran var = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (ukuran < 100 ? ukuran : 100) + 'px' } var evt = 'onorientationchange' di win ? timer = null; win.addEventListener(evt, fungsi () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //Inisialisasi setFontSize();}(jendela, dokumen));

Versi yang sangat akurat:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Dapatkan lebar jendela saat ini var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ). lebar; // Lebih besar dari 1080px tekan 1080 jika (lebar > 1080) { lebar = 1080; } var rem = lebar / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; .getComputedStyle(docEl)[ukuran font]); jika (Ukuran aktual !== rem && Ukuran aktual > 0 && Math.abs(Ukuran aktual - rem) > 1) { var remScaled = rem * rem / ukuran aktual; docEl.style.fontSize = remScaled + 'px'; } var timer; = setTimeout(setFontSize, 100); //Pembaruan jendela secara dinamis mengubah ukuran font WIN.addEventListener('resize', dbcRefresh, false); //Hitung sekali saat halaman ditampilkan WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)//Untuk halaman push aktivitas H5, rasio lebar dan tinggi diperlukan, dan fungsi adjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width(); // Pertimbangkan bilah navigasi if (width / height < 360/600 ) { kembali; } lebar = Math.ceil(tinggi * 360/640); $(warpId).css({ tinggi, lebar, posisi: 'relatif', atas: 0, kiri: 'otomatis', margin: '0 otomatis' }); // Hitung ulang rem window.setFontSize(width);}

Mudah digunakan tetapi kurang fleksibel, silakan tonton demonya Anda akan mengerti.

 @media screen dan ( min-width: 320px){html{font-size:50px}}@media screen dan ( min-width: 360px){html{font-size:56.25px}}@media screen dan ( min- lebar: 375px){html{font-size:58.59375px}}@layar media dan ( lebar minimum: 384px){html{font-size:60px}}@media screen dan ( min-width: 400px){html{font-size:62.5px}}@media screen dan ( min-width: 414px){html{font- ukuran:64.6875px}}@layar media dan ( lebar minimum: 424px){html{font-size:66.25px}}@media screen dan ( min-width: 480px){html{font-size:75px}}@media screen dan ( min-width: 540px){html{font- ukuran:84.375px}}@layar media dan ( lebar minimum: 640px){html{ukuran font:100px}}

Itu dapat dimodifikasi dengan tepat sesuai dengan kebutuhan proyek pribadi dan desain produk. Metode penulisan demo di atas tidak unik dan tetap.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.