The main methods are:
Simplified general version:
!(function(win, doc){ function setFontSize() { // Get the window width // This is how zepto implements $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' ; // Limiting the width above 640 requires css to match var size = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ; } var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'; var timer = null; win.addEventListener(evt, function () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //Initialize setFontSize();}(window, document));Highly accurate version:
(function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Get the width of the current window var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect(). width; // Greater than 1080px press 1080 if (width > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // Error and compatibility processing var actualSize = win.getComputedStyle && parseFloat( win.getComputedStyle(docEl)[font-size]); if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; docEl.style.fontSize = remScaled + 'px'; } } var timer; function dbcRefresh() { clearTimeout(timer); timer = setTimeout(setFontSize, 100); } //Window update dynamically changes font-size WIN.addEventListener('resize', dbcRefresh, false); //Calculate once when the page is displayed WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false); setFontSize ();})(window)//For H5 activity push pages, the width and height ratio are required, and the function adjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width(); // Consider the navigation bar if (width / height < 360 / 600 ) { return; } width = Math.ceil(height * 360 / 640); $(warpId).css({ height, width, position: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // Recalculate rem window.setFontSize(width);} 2 Setting rem via CSS3 media queriesEasy to use but lacks flexibility, please watch the demo. You will understand.
@media screen and ( min-width: 320px){html{font-size:50px}}@media screen and ( min-width: 360px){html{font-size:56.25px}}@media screen and ( min- width: 375px){html{font-size:58.59375px}}@media screen and ( min-width: 384px){html{font-size:60px}}@media screen and ( min-width: 400px){html{font-size:62.5px}}@media screen and ( min-width: 414px){html{font- size:64.6875px}}@media screen and ( min-width: 424px){html{font-size:66.25px}}@media screen and ( min-width: 480px){html{font-size:75px}}@media screen and ( min-width: 540px){html{font- size:84.375px}}@media screen and ( min-width: 640px){html{font-size:100px}}It can be modified appropriately according to personal project needs and product design. The above demo writing method is not unique and fixed.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.