Specification purposes

In order to improve the development efficiency of the front-end team, output high-quality front-end page code, and improve the degree of UI design restore, this specification document is specially prepared. If there is anything wrong or inappropriate in this document, please raise it in time.

JS code block

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if(! clientWidth)return;
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }};if(! doc.addEventListener)return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
Copy the code

Method of use

UI designers suggest taking the size twice that of iphone6 (750px) as the standard size when designing the interface. Front-end development refers to the above code block in the development page first, and the front-end development still marks according to the standard PX when selecting labels. In order to facilitate calculation, multiply the JS code block by 100. The actual size in CSS is simply divided by 100 to get the value of REM.

Figure: The title bar is 88px in the annotation and 88/100=0.88rem in the CSS

Matters needing attention

• If the size of the design is not 750px, the code block should be modified accordingly.
• This adaptation is best used on mobile devices.

Reference documentation

• Detailed explanation of mobile web font unit REM