Explanation of H5 activity Page's mobile-side REM layout adaptation method, h5rem

Explanation of H5 activity Page's mobile-side REM layout adaptation method, h5rem

After obtaining the design draft, how do I restore the layout?

If you only need to do an inaccurate responsive design, it is okay to use media queries. If you need to precisely restore the design draft, it is generally achieved through scaling. Common solutions include viewport-based and rem-Based Scaling solutions.

1 viewport scaling Solution

On the mobile end, you can use viewport to scale the page size ratio.

Simply put, that is, all the width and height pixels are the same as the visual output, and then the viewport is dynamically set through the ratio of the page width to the visual width. Core code of the scaling solution:

(Function () {var docEl = document.doc umentElement; 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 used in the design of an H5 activity page last year.

However, if you want to display it on the PC, you can only set it with a fixed value because there is no viewport scaling concept. This effect is not ideal.

2 rem layout adaptation solution

Rem layout adaptation solutions have been mentioned many times and are widely used in Internet enterprise products.

The method is 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.

The following is an example.

2.1 dynamically set the html Tag font-size

The first problem is the font-size Dynamic Calculation of html tags. This depends on how to specify the conversion ratio. Take the page width as an example. For the core code, refer:

(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 on some models. var actualSize = win. getComputedStyle & parseF Loat (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 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)

In addition, for H5 activity pages displayed in full screen mode, the width and height ratio are required and the adjustments should be made at this time. You can do this:

Function adjustWarp (warpId = '# warp') {// if (window. isMobile) return; 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 );}

According to this scaling method, the exact proportional scaling layout can be achieved on almost any device.

2.2 element size Value Method

The second problem is the value of the element size.

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

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

For example, the size of an image in the design draft is 460x210, and the relative position of the page is 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;}

2.3 development of rem Layout Scheme

Through the above method, the rem layout scheme is implemented. However, manual calculation of rem values is obviously unrealistic.

With the less/sass preprocessing tool, we only need to set the mixins method and then set the value based on the actual size of the design draft. Take less as an example. For details about mixins, refer to the following:

// Convert 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 preceding example elements, the css style can be written as follows:

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

Here, the width and height can be directly read through the size of the image elements output by the design draft; the value of top/left can be quickly obtained by moving the reference line positioning element in Photoshop.

2.4 font in px format

When the font is scaled with rem proportional scaling, the display may fail. You only need to set the size of the font by using media queries.

Example reference:

// Font response @ 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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.