Penjelasan rinci tentang metode adaptasi tata letak REM seluler untuk halaman aktivitas H5

Setelah mendapatkan draf desain, bagaimana cara mengembalikan tata letaknya?

Jika Anda hanya perlu melakukan desain responsif yang tidak persis, menggunakan kueri media untuk mencapainya tidak masalah. Jika perlu mengembalikan rancangan desain secara akurat, hal ini biasanya dicapai melalui zoom. Solusi umum mencakup solusi penskalaan berbasis viewport dan berbasis rem.

Di sisi seluler, tujuan tersebut dapat dicapai dengan menskalakan rasio ukuran halaman melalui area pandang.

Sederhananya, semua piksel lebar dan tinggi sama dengan keluaran naskah visual, dan kemudian area pandang diatur secara dinamis melalui rasio lebar halaman terhadap lebar naskah visual. Referensi kode inti skema penskalaan:

 (fungsi () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; if (window.top !== window) { kembalikan pageScale } var lebar = docEl.clientWidth ||.360; var tinggi = docEl.clientHeight || konten = 'lebar=' + 360 + ', skala awal=' + skala halaman + ', skala maksimum=' + pageScale + ', skala pengguna=tidak'; document.getElementById('viewport').setAttribute('content', content window.pageScale = pageScale; ; } lain { docEl.className += ' pc';

Solusi ini dipraktikkan dalam desain halaman aktivitas H5 kami tahun lalu.

Namun jika ingin ditampilkan di PC, karena tidak ada konsep penskalaan viewport, maka hanya dapat diatur dengan nilai tetap, yang tidak ideal.

Solusi adaptasi tata letak rem telah sering disebutkan dan digunakan secara luas dalam produk perusahaan Internet besar.

Sederhananya, caranya 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.

Mari kita beri contoh untuk mengilustrasikannya.

Masalah pertama adalah perhitungan dinamis ukuran font tag html. Hal ini tergantung pada bagaimana rasio konversi disepakati. Mengambil sepuluh bagian lebar halaman yang sama sebagai contoh, referensi kode inti:

 (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) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; parseFloat(win.getComputedStyle(docEl)[ukuran font]); ukuran sebenarnya > 0 && Math.abs(ukuran aktual - rem) > 1) { var remScaled = rem * rem / ukuran sebenarnya; docEl.style.fontSize = remScaled + 'px'; { waktu habis(pengatur waktu); pengatur waktu = setWaktu habis(setFontSize, 100); //Pembaruan jendela secara dinamis mengubah ukuran font WIN.addEventListener('resize', dbcRefresh, false); //Hitung sekali ketika halaman ditampilkan WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh () } }, salah); setFontSize();})(jendela)

Selain itu, untuk halaman aktivitas H5 layar penuh, terdapat persyaratan rasio aspek, dan penyesuaian harus dilakukan saat ini. Anda dapat melakukannya seperti ini:

 function adjustWarp(warpId = '#warp') { // if (window.isMobile) kembali; const $win = $(window); const height = $win.height(); // Pertimbangkan bilah navigasi if (lebar / tinggi < 360 / 600) { return; } width = Math.ceil(height * 360 / 640); $(warpId).css({ tinggi, lebar, posisi: 'relatif', atas: 0, kiri: 'otomatis', margin: '0 otomatis' }); // Hitung ulang rem window.setFontSize(width);}

Mengikuti metode penskalaan ini, tata letak yang presisi dengan penskalaan proporsional dapat dicapai di hampir semua perangkat.

Masalah kedua adalah nilai ukuran elemen.

Ambil contoh lebar rancangan desain 1080px, kita bagi lebarnya menjadi 10 bagian yang sama agar mudah dikonversi, lalu 1rem = 1080/10 = 108px. Metode konversinya adalah:

 const px2rem = fungsi(px, rem = 108) { biarkan remVal = parseFloat(px) / rem; if (typeof px === string && px.match(/px$/)) { remVal += 'rem'; kembalikan remVal;}

Misalnya, ada gambar dalam rancangan desain dengan ukuran 460x210 dan posisi halaman relatif atas: 321px kiri: 70;. Menurut metode konversi di atas, gaya css akhir dari elemen tersebut seharusnya:

 .img_demo { posisi: absolut; ukuran latar: sampul; gambar latar: url('demo.png'); atas: 2.94444rem;}

Melalui metode di atas, skema tata letak rem diwujudkan. Namun menghitung nilai rem secara manual jelas tidak realistis.

Dengan alat less/sass preprocessing, kita hanya perlu mengatur metode mixins, lalu mengatur nilainya sesuai dengan ukuran sebenarnya dari rancangan desain. Mengambil less sebagai contoh, referensi mixinnya adalah sebagai berikut:

 // px ke rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @tinggi, @rem: 108rem) { .px2rem(@atas, atas, @rem); .px2rem(@kiri, kiri, @rem); .px2rem(@lebar, lebar, @rem);}

Untuk contoh elemen sebelumnya, style css dapat ditulis seperti ini:

 .img_demo { posisi: absolut; ukuran latar: sampul; gambar latar: url('demo.png');}

Di sini, lebar dan tinggi dapat dibaca langsung dari ukuran keluaran elemen gambar dalam rancangan desain; nilai atas/kiri dapat diperoleh dengan cepat dengan menggerakkan garis referensi untuk memposisikan elemen di Photoshop.

Penskalaan font menggunakan proporsi rem akan menyebabkan masalah tampilan. Anda hanya perlu menggunakan kueri media untuk mengatur beberapa ukuran.

Contoh referensi:

 // Font responsif @layar media dan (lebar maksimal: 321 piksel) { badan { ukuran font: 13 piksel; }}@layar media dan (lebar minimum: 321 piksel) dan (lebar maksimal: 400 piksel) { badan { font - ukuran: 14 piksel; }}@layar media dan (lebar minimum: 400 piksel) { badan { ukuran font: 16 piksel; }}

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