[css] Use of cssrem mobile terminal adaptation plug-in in VScode

1. Install the plugin

Search for the "cssrem" plugin in the vscode extension store

2. Run and modify the configuration

Start the plug-in first, and then select Settings -> Extended Settings

to set the basic font size according to the actual design draft

. After the configuration is complete, you can restart vscode.

3. Programming with js code

Create a js script that automatically modifies the baseline font-size in the project

cssrem.js, introduce it under the body tag in index.html, here I set it to 100 times, that is, 100px=1rem.

fnResize();
window.onresize = function () {
    
    
    fnResize();
    window.addEventListener("resize", fnResize);
};

function fnResize() {
    
    
    let devWidth = document.documentElement.clientWidth || window.innerWidth;
    if (devWidth >= 750) {
    
    
        devWidth = 750;
    }
    if (devWidth <= 320) {
    
    
        devWidth = 320;
    }
    document.documentElement.style.fontSize = devWidth / 7.5 + "px";
}

Then you can directly convert it into rem when writing px