Detailed explanation of HTML5 page rem layout adaptation method

The main methods are:

1. Dynamically calculate and set the font-size of the HTML root tag according to the ratio of the design draft to the device width;
2. In css, the width, height, relative position, etc. of the design draft elements are converted into values ​​in rem units according to the same proportion;
3. The fonts in the design draft use px as the unit and are slightly adjusted through media queries.

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);}

Easy 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.