วิธีการหลักคือ:
เวอร์ชันทั่วไปที่เรียบง่าย:
!(function(win, doc){ function setFontSize() { // รับความกว้างของหน้าต่าง // นี่คือวิธีที่ zepto ใช้งาน $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' ; // การจำกัดความกว้างที่สูงกว่า 640 ต้องใช้ CSS เพื่อให้ตรงกับขนาด var = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (ขนาด < 100 ? ขนาด : 100) + 'px' ; } var evt = 'onorientationchange' ใน win ? จับเวลา = null; win.addEventListener (evt, ฟังก์ชั่น () { clearTimeout (จับเวลา); จับเวลา = setTimeout(setFontSize, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, เท็จ); //เตรียมใช้งาน setFontSize();}(หน้าต่าง, เอกสาร));รุ่นที่มีความแม่นยำสูง:
(function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // รับความกว้างของหน้าต่างปัจจุบัน var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ) width; // มากกว่า 1080px กด 1080 if (width > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // ข้อผิดพลาดและการประมวลผลความเข้ากันได้ var realSize = win.getComputedStyle && parseFloat( win .getComputedStyle(docEl)[ขนาดตัวอักษร]); if (actualSize !== rem &&actualSize > 0 && Math.abs(actualSize - rem) > } var ฟังก์ชัน dbcRefresh() { clearTimeout(timer); = setTimeout(setFontSize, 100); } //อัปเดตหน้าต่างเปลี่ยนขนาดตัวอักษรแบบไดนามิก WIN.addEventListener('resize', dbcRefresh, false); //คำนวณหนึ่งครั้งเมื่อเพจแสดง WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)//สำหรับหน้าพุชกิจกรรม H5 จำเป็นต้องมีอัตราส่วนความกว้างและความสูง และฟังก์ชัน adjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); ให้ width = $win.width(); // พิจารณาแถบนำทางถ้า (ความกว้าง / ความสูง < 360 / 600 ) { return; } width = Math.ceil(height * 360/640); $(warpId).css({ ความสูง, ความกว้าง, ตำแหน่ง: 'ญาติ', ด้านบน: 0, ซ้าย: 'auto', ระยะขอบ: '0 auto' }); // คำนวณ rem window.setFontSize(width);} 2 การตั้งค่า rem ผ่านการสืบค้นสื่อ CSS3ใช้งานง่ายแต่ขาดความยืดหยุ่น โปรดดูการสาธิต คุณจะเข้าใจ
@media screen และ ( min-width: 320px){html{font-size:50px}}@media screen และ ( min-width: 360px){html{font-size:56.25px}}@media screen และ ( min- width: 375px){html{font-size:58.59375px}}@หน้าจอสื่อ และ ( min-width: 384px){html{font-size:60px}}@หน้าจอสื่อ และ ( ความกว้างขั้นต่ำ: 400px){html{font-size:62.5px}}@หน้าจอสื่อ และ ( ความกว้างขั้นต่ำ: 414px){html{font- ขนาด:64.6875px}}@หน้าจอสื่อ และ ( ความกว้างขั้นต่ำ: 424px){html{font-size:66.25px}}@หน้าจอสื่อ และ ( ความกว้างขั้นต่ำ: 480px){html{font-size:75px}}@หน้าจอสื่อ และ ( ความกว้างขั้นต่ำ: 540px){html{font- size:84.375px}}@หน้าจอสื่อ และ ( ความกว้างขั้นต่ำ: 640px){html{font-size:100px}}สามารถแก้ไขได้อย่างเหมาะสมตามความต้องการของโครงการส่วนบุคคลและการออกแบบผลิตภัณฑ์ วิธีการเขียนสาธิตข้างต้นไม่ซ้ำกันและได้รับการแก้ไขแล้ว
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network