1. Instale el complemento
Busque el complemento "cssrem" en la tienda de extensiones de vscode
2. Ejecute y modifique la configuración.
Primero, inicie el complemento y luego seleccione Configuración -> Configuración extendida
para establecer el tamaño de fuente básico de acuerdo con el borrador del diseño real
. Una vez completada la configuración, puede reiniciar vscode.
3. Programación con código js
Cree un script js que modifique automáticamente el tamaño de fuente de la línea de base en el proyecto
cssrem.js, introdúcelo debajo de la etiqueta del cuerpo en index.html, aquí lo configuro en 100 veces, es decir, 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";
}
Entonces puedes convertirlo directamente en rem al escribir px
