Detailed description of html5 page rem layout adaptation method, html5rem

Detailed description of html5 page rem layout adaptation method, html5rem

Rem layout adaptation solution

The main methods are as follows:

1. Dynamically calculate and set the font-size of the html root tag based on the ratio of the design draft to the device width;
2. In css, the width, height, and relative position of the design draft element are converted to the value in rem units according to the same proportion;
3. The fonts in the design draft are in px units and slightly adjusted through media queries.

1. dynamically set the font-size of html tags

Simplified general version:

! (Function (win, doc) {function setFontSize () {// obtain the window width // zepto implementation $ (window ). width () is the var winWidth = window. innerWidth; // doc.doc umentElement. style. fontSize = (winWidth/640) * 100 + 'px '; // css must be used with var size = (winWidth/640) * 640; doc.doc umentElement. style. fontSize = (size <100? Size: 100) + 'px ';} var evt = 'onorientationchange' in win? 'Orientationchang': '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 ));

Advanced accurate version:

(Function (WIN) {var setFontSize = WIN. setFontSize = function (_ width) {var docEl = document.doc umentElement; // obtain the width of the current window var width = _ width | docEl. clientWidth; // docEl. getBoundingClientRect (). width; // press 1080 if (width> 1080) {width = 1080;} var rem = width/10; console. log (rem); docEl. style. fontSize = rem + 'px '; // handle errors and compatibility var actualSize = win. getComputedStyle & parseFloat (w In. 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 WIN once when the page is displayed. addEventListener ('pageshow ', function (e) {if (e. persisted) {dbcRefresh () }}, false); setFontSize () ;}( window) // you have pushed the page for the H5 activity. The width and height ratio are required, you can adjust function adjustWarp (warpId = '# warp') {const $ win = $ (window); const height = $ win. height (); let width = $ win. width (); // if (width/height <360/600) {return;} width = Math. ceil (height * 360/640); vertex (warpid).css ({height, width, postion: 'relative ', top: 0, left: 'auto', margin: '0 auto '}); // re-calculate the rem window. setFontSize (width );}

2. Set rem through CSS3 media Query

Ease of use, lack of flexibility, please refer to the demo, you know

@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}}

You can modify the demo based on your project requirements and product design.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.