Te llevará a entender en 5 minutos: adaptación móvil rem del proyecto vue

Este artículo presenta brevemente la preparación de la adaptación rem para el terminal móvil del proyecto vue.

En primer lugar, el terminal móvil debe usar la biblioteca de componentes vant. Antes de desarrollar el terminal móvil, generalmente se requiere una adaptación rem. Por supuesto, también es posible la adaptación vw. Aquí hay una breve introducción a la adaptación rem.

Primer vistazo a la introducción en el sitio web oficial de vant

Se requieren estos dos complementos:

Paso 1: Instalar

npm i amfe-flexible

Paso 2: Referencia (haz referencia en main.js)

import 'amfe-flexible'

Paso 3: Mire el efecto, puede ver un tamaño de fuente: 37.5px en el navegador

En este momento, algunos estudiantes preguntarán, esto no es suficiente, ¿por qué instalar otro postcss-pxtorem?

No sé si habrás notado que en este momento, solo cambiamos el tamaño de fuente raíz de la página web a 37.5 px, pero el ancho, alto y otros estilos en la página web todavía usan px, es decir, tiene aún no ha tenido efecto. En este momento, necesitamos cambiar la izquierda y la derecha. El tamaño se convierte automáticamente a rem.

postcss-pxtorem está aquí para lograr esta función, no necesita calcular manualmente cuánto rem es igual a cada px

Dos, configurar postcss-pxtorem

paso uno:

npm install postcss-pxtorem -D

Paso 2: luego cree un archivo el directorio raíz del proyecto.postcssrc.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

.postcssrc.jsPara explicarlo, el complemento postcss-pxtorem buscará automáticamente la carpeta nombrada en el directorio raíz

Entre ellos, 37.5 se calcula de acuerdo con el borrador de diseño de 375. Si es un borrador de diseño de 750, si escribe 37.5, debe dividirlo manualmente por dos al medir, de lo contrario, ¡será muy grande! Si escribe 75, la biblioteca de componentes vant se volverá muy grande, porque la biblioteca de componentes vant está diseñada de acuerdo con 375, por lo que será muy problemático. ¿Hay una forma conveniente de escribirlo?

Eso debe estar allí, simplemente modifique el archivo de configuración postcss al siguiente código:

/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}