How to design the rem ratio according to the design drawing

The difference between PC and mobile websites

PC side: The screen size is large, the display content is large, the structure is complicated, the browser window is reduced, the page content structure will not change, and it is not responsive.

Mobile terminal: The screen size is small, the displayed content is limited, the structure is clear and concise, and there are many types of devices. The browser window adapts to the size of the mobile terminal screen.

The concept of rem

rem: the multiple of the calculated value of font-size relative to the root element (ie html element).

• The essence of the rem layout is proportional scaling, which is generally based on the width. The width of the design draft is used to dynamically obtain the width of the screen using js

• rem is the unit relative to the font size of the root element, which is the font-size of html. The default font size of the browser is 16px, so the default 1rem=16px

We can dynamically set the font-size of the root element according to the width of the device, so that the elements in the unit of rem are presented with relatively consistent visual effects on different terminals.

How to design the rem ratio according to the design drawing

The core formula in rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

// document.documentElement.style.fontSize 
// html的字体大小
// document.documentElement.clientWidth / 7.5 + 'px'
//           可视窗口的大小        除于 设计图的宽度除于100  +px

The effect of this string of codes is

Change the font size of the root element according to the width of the screen to adapt to different devices

If the width of our design draft is 750px, use rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

// 

1rem = 100px;
50px can be written as 0.5rem
10px can be written as 0.1rem,
if we need to fill the screen, we need 7.5rem

Why use rem

In chrome, chrome forces the minimum font size to be 12px. If it is lower than 12px, it will be treated as 12px. There will be no smaller fonts, but there is no such limitation when using rem. Usually 1rem=100px

Adaptation through dynamic root font-size, basically no compatibility issues, more accurate adaptation, easy conversion

The complete code of rem

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

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);