Detailed explanation of mobile REM layout adaptation method for H5 activity page

After getting the design draft, how to restore the layout?

If you only need to do non-exact responsive design, then using media queries to achieve it is OK. If it is necessary to accurately restore the design draft, this is usually achieved through zooming. Common solutions include viewport-based and rem-based scaling solutions.

On the mobile side, the purpose can be achieved by scaling the page size ratio through the viewport.

To put it simply, all the width and height pixels are the same as the visual manuscript output, and then the viewport is dynamically set through the ratio of the page width to the visual manuscript width. Scaling scheme core code reference:

 (function () { 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) { return pageScale; } var width = docEl.clientWidth || 360; var height = docEl.clientHeight || 640; if (width / height >= 360 / 640) { // Height priority pageScale = height / 640; } else { pageScale = width / 360; } var content = 'width=' + 360 + ', initial-scale=' + pageScale + ', maximum-scale=' + pageScale + ', user-scalable=no'; document.getElementById('viewport').setAttribute('content', content); window.pageScale = pageScale; } if (isMobile) { setScale() ; } else { docEl.className += ' pc'; }})()

This solution was practiced in our H5 activity page design last year.

However, if you want it to be displayed on the PC, since there is no concept of viewport scaling, it can only be set with a fixed value, which is not ideal.

The rem layout adaptation solution has been mentioned frequently and is widely used in the products of major Internet companies.

Simply put, the method is:

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.

Let's give an example to illustrate.

The first problem is the dynamic calculation of font-size of html tags. This depends on how the conversion ratio is agreed upon. Taking ten equal parts of the page width as an example, the core code reference:

 (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 on some models 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 throttling function dbcRefresh( ) { clearTimeout(timer); timer = setTimeout(setFontSize, 100); } //Window updates dynamically change 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)

In addition, for full-screen H5 activity pages, there are requirements for the aspect ratio, and adjustments should be made at this time. You can do it like this:

 function adjustWarp(warpId = '#warp') { // if (window.isMobile) return; 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, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // Recalculate rem window.setFontSize(width);}

Following this scaling method, precise layouts with proportional scaling can be achieved on almost any device.

The second problem is the value of the element size.

Taking the width of the design draft as 1080px as an example, we divide the width into 10 equal parts for easy conversion, then 1rem = 1080 / 10 = 108px. The conversion method is:

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

For example, there is an image in the design draft with a size of 460x210 and a relative page position of top: 321px; left: 70;. According to the above conversion method, the final css style of the element should be:

 .img_demo { position: absolute; background-size: cover; background-image: url('demo.png'); top: 2.97222rem; left: 0.64814rem; width: 4.25926rem; height: 1.94444rem;}

Through the above method, the rem layout scheme is realized. But manually calculating the value of rem is obviously unrealistic.

With the less/sass preprocessing tool, we only need to set the mixins method, and then set the value according to the actual size of the design draft. Taking less as an example, the mixins reference is as follows:

 // px to rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@left, left, @rem); .px2rem(@width, width, @rem); .px2rem(@height, height, @rem);}

For the previous example element, the css style can be written like this:

 .img_demo { position: absolute; background-size: cover; background-image: url('demo.png'); .px2remTLWH(321, 70, 460, 210);}

Here, the width and height can be read directly from the size of the picture element output in the design draft; the values ​​of top/left can be quickly obtained by moving the reference line to position the element in Photoshop.

Scaling fonts using rem proportions will cause display problems. You only need to use media queries to set several sizes.

Example reference:

 // Font responsive @media screen and (max-width: 321px) { body { font-size: 13px; }}@media screen and (min-width: 321px) and (max-width: 400px) { body { font -size: 14px; }}@media screen and (min-width: 400px) { body { font-size: 16px; }}

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.