[css] Uso do plug-in de adaptação de terminal móvel cssrem no VScode

1. Instale o plugin

Procure o plugin "cssrem" na loja de extensões vscode

2. Execute e modifique a configuração

Inicie o plug-in primeiro e, em seguida, selecione Configurações -> Configurações estendidas

para definir o tamanho da fonte básica de acordo com o rascunho do projeto

real.Após a configuração ser concluída, você pode reiniciar o vscode.

3. Programação com código js

Crie um script js que modifica automaticamente o tamanho da fonte da linha de base no projeto

cssrem.js, introduza-o sob a tag body em index.html, aqui eu configuro para 100 vezes, ou seja, 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";
}

Então você pode convertê-lo diretamente em rem ao escrever px