VUE PC terminal terminal móvil adaptación REM

requiere dos complementos 

lib-flexible para establecer puntos de referencia rem;

postcss-pxtorem es un complemento postcss para convertir unidades a rem;

Instalar lib-flexible

cnpm i amfe-flexible

Referenciado en main.js

import 'amfe-flexible'

instalar postcss-pxtorem

cnpm install postcss-pxtorem -D

vue2, luego cree un archivo .postcssrc.js en el directorio raíz del proyecto:

module.exports = {
  plugins: {
    'autoprefixer': {
       browsers: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: ['norem']
    }
  }
}

En vue3+vite:

Configurar en vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer';
import postCssPxToRem from 'postcss-pxtorem';
export default defineConfig({
  plugins: [vue()],

  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
        }),
      ],
    },
  }
})

 

` rootValue` : indica el tamaño de fuente del elemento raíz, que realizará la conversión de unidades de acuerdo con el tamaño del elemento raíz

Establézcalo en una décima parte de su borrador de diseño.

Por ejemplo, si el borrador del diseño tiene un ancho de 750, debe establecerse en 75.

` propList` se usa para establecer propiedades que se pueden convertir de px a rem  

Por ejemplo, `*` significa que se deben convertir todos los atributos, y `width` significa que solo se debe convertir el atributo `width`