Use px2rem en el front-end de Vue para convertir px a rem

Cuando se usa Vue como una página móvil, la adaptación es imprescindible, y rem es una buena opción, que puede mostrar perfectamente el mismo diseño en diferentes pantallas. El complemento px2rem puede convertir la unidad px en rem de acuerdo con el borrador de diseño <style></style>.

1. Instalar

2. Configuraciónpx2rem-loader

build/utils.jsAgregue en la línea 15 de export.assetsPath = function(_pth){...}:

export.cssLoaders = funtion(options){
    option = option || {}
    const cssLoader = {
        loader:'css-loader',
        options:{
            sourceMap:options.sourceMap
        }
    }
    
    const px2RemLoader = {
        loader:'px2rem-loader',
        options:{
            remUnit:75 
        }
    }
    const postcssLoader = {
        loader:'postcss=loader',
        options:{
            sourceMap:options.sourceMap
        }
    }
}

3. Modificarfunction generateLoader(loader,loaderOptions){...}

Saluda const loader = ...al siguiente operador ternario y agrega cada una de las siguientes matricespx2remLoader

function (loader, loaderOptions){
    const loaders = option.usePostCss ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if(loader) {
        ....
    }
}

 

4. uso

<style lang="" scoped>
    .wrap{
        width:750px; /** 上面的remUnit：75的时候为10rem **/
        height:1334px
    }
</style>

5. Precauciones

Después de instalar px2rem, hay algunas diferencias al usar px. Puede consultar la introducción oficial de px2rem. Aquí hay una breve introducción.
1. Escriba directamente px, que se convertirá directamente en rem después de la compilación — excepto en los dos casos siguientes, use esto para otras longitudes

2. Agregar después de px /*no*/no convertirá px, pero se generará tal cual. — La frontera general necesita usar esto

3. Agregar después de px /*px*/generará tres conjuntos de códigos según la diferencia de dpr. —- Las fuentes generales necesitan usar esto