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

If you only need to do imprecise, reactive design, you can do it using media queries. If the design needs to be accurately restored, it is generally achieved by scaling. Common scaling schemes include viewport-based and REM based layout adaptation methods.

1 ViewPort Zoom scheme

On the mobile side, you can scale the page size ratio using viewPort.

In simple terms, all pixels are the same width and height as the visual output, and the viewPort is dynamically set by the ratio of the page width to the visual output. 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; PageScale = height / 640; if (width/height >= 360/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'; }}) ()Copy the code

We carried out relevant practice in the design of an H5 activity page last year, see: LZW. me/ A/H5-MyFlyM…

However, if you want it to work on a PC, you can only set it to a fixed value because there is no concept of viewPort zoom on a PC.

2 rem layout adaptation scheme

Rem layout adaptation scheme has been mentioned more often and has been widely used in web products of major Internet enterprises.

To put it simply, the method is:

  • Dynamically calculate and set the HTML root tag according to the ratio of the design document to the device widthfont-sizeSize;
  • In the CSS, the width, height, and relative position of design elements are converted to rem in the same proportion.
  • The font in the design draft uses px units and is adjusted slightly by media queries.

Let’s take an example.

2.1 Dynamically Setting HTML Tagsfont-sizeThe size of the

The first problem is the dynamic calculation of font size for HTML tags.

This depends on how to agree the conversion ratio, take the page width 10 equal parts as an example, the core code reference:

(function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; The width of the var / / get the current window width = _width | | docEl. ClientWidth; // docEl.getBoundingClientRect().width; If (width > 1080) {width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; 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); Font-size win.addeventListener ('resize', dbcRefresh, false); Win.addeventlistener (' pagesHow ', function(e) {if (e.persisted) {dbcRefresh()}}, false); setFontSize(); })(window)Copy the code

In addition, for the H5 active page displayed in full screen, there is a requirement for the ratio of width to height, which should be adjusted. It can be done like 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); $(warpId).css({ height, width, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // recalculate rem window.setfontSize (width); }Copy the code

With this scaling method, an exact layout of proportional scaling can be achieved on almost any device.

2.2 Element size method

The second problem is how to evaluate the pixel size of an element.

For example, if the width of the design is 1080px, we divide the width into 10 equal parts for easy conversion, so 1rem = 1080/10 = 108px. 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;
}
Copy the code

For example, an image size 460×210, relative to the page position top: 321px; left: 70px; . The final CSS style for this element should be:

.img_demo { position: absolute; background-size: cover; background-image: url('demo.png'); Top: 2.97222 rem; Left: 0.64814 rem; Width: 4.25926 rem; Height: 1.94444 rem; }Copy the code

2.3 Development mode of REM layout scheme

Through the above method, THE REM layout scheme has been realized. But calculating REM by hand is not practical. With less/ Sass preprocessing tools, we simply set the mixins method and value it according to the actual size of the design. Taking less as an example, mixins are as follows:

/ / px rem. Px2rem (@ px, @ attr: 'width' @ rem: 108 rem) {@ {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); }Copy the code

For the previous example elements, CSS styles can be written like this:

.img_demo {
    position: absolute;
    background-size: cover;
    background-image: url('demo.png');

    .px2remTLWH(321, 70, 460, 210);
}
Copy the code

Here, the width and height can be read directly from the size of the image element in the output of the design draft; The value of top/left can be quickly obtained by moving the guide to position the element in Photoshop.

2.4 Use px as the font unit

Since font scaling is obviously out of sync with length units, rem is not an appropriate unit for fonts. Use px as the unit for the text, and then use the specific media query to set several sizes.

Example reference:

// @media screen and (max-width: 321px) {body {font-size: 12px; } } @media screen and (min-width: 321px) and (max-width: 400px) { body { font-size: 14px; } } @media screen and (min-width: 400px) { body { font-size: 16px; }}Copy the code

3 Related References

http://www.jianshu.com/p/dfa33d3be23c http://hcysun.me/2015/10/19/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E 5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0-%E4%BA%8C/