H5 mobile end web end adaptation (js+rem)

H5 mobile end web end adaptation (js+rem)

Business scenario: Since the requirement is to adapt the screens at both ends, the css that I thought at the beginning was written in rem, but the
font and layout will not scale proportionally. Later, I found a
js code to do it for the root element Scaling configuration, plus rem and this js setting
can achieve proportional scaling.

---

1. Download the plug-in and modify the scale (if the ui size is 750, change it to 50 375 to 25), and restart vscode after the modification

Restart, renderings:

2. Create a new index.js and copy the code below to use it.

   //适配兼容
   (function (doc, win) {
    
    
    console.log(doc, win)
    // var docEle = doc.documentElement;
    const dpr = Math.min(win.devicePixelRatio, 3),
        scale = 1 / dpr,
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

    var recalCulate = function () {
    
    
        var docEle = document.documentElement,
            w = docEle.clientWidth,
            num = (w > 750 ? 750 : w) / 750;       // **此时的750就是你设计稿的尺寸
        docEle.style.fontSize = (num * 100).toFixed(1) + 'px';
    };
    recalCulate();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

_φ (❐_❐✧ ugly people would read more books
easy to use do not mention it, a point like oh ~