Solución de adaptación de terminal móvil vue: px se convierte automáticamente a rem

1.Instalar lib-flexible

yarn add lib-flexible

2. Introducciónlib-flexible

# src/main.ts

import 'lib-flexible/flexible'

3.Instalaciónpostcss-pxtorem

yarn add postcss-pxtorem

4. Cree un nuevo postcss.config.js en el directorio raíz

# project_name/postcss.config.js

module.exports = {
    plugins: {
    // 兼容浏览器，添加前缀
    autoprefixer: {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8",
          "last 10 versions",
        ],
        grid: true,
      },
      "postcss-pxtorem": {
        //rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
        rootValue: 75, //通常结合 lib-flexible 设置 rem 基准值,默认用75,不然容易出问题
        propList: ["*"], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        unitPrecision: 5, //保留rem小数点多少位
        replace: true,
        mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
        minPixelValue: 12, //px小于12的不会被转换
      }
    }
  }

Si le resulta problemático, puede cambiarlo a lo siguiente:

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ['*'],
    }
  }
}

Simplemente reinicie el proyecto

Si aparece el siguiente mensaje de error al ejecutar el proyecto:

vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

Verifique la versión de postcss-pxtorem en package.jso. Si es 6.*, la versión es demasiado alta e incompatible. Simplemente desinstale y reinstale la versión 5.1.1.

yarn remove postcss-pxtorem
yarn add [email protected]

principio

lib-flexible: Calcule el tamaño de fuente de HTML según diferentes pantallas y escriba metaetiquetas dinámicamente a través de js. Se agregará automáticamente una etiqueta con meta nombre="viewport" al encabezado del HTML, y el tamaño de fuente del HTML se establecerá automáticamente en el ancho de la pantalla dividido por 10, es decir, 1rem es igual a la fuente. tamaño del nodo raíz HTML. Si el ancho del borrador del diseño es 750 px, entonces 1 rem debe ser igual a 75 px. Si el ancho de un elemento medido es 150 px, entonces el ancho de este elemento definido en CSS es ancho: 2rem

Nota:
1. Las etiquetas lib-flexiblese agregarán automáticamente a la página según la pantalla y los valores de atributos como escala inicial, escala máxima y escala mínima se controlarán dinámicamente. 2. Verifique el encabezado del archivo html. Si hay una etiqueta meta nombre = "viewport", debe comentarla, porque si existe esta etiqueta, lib-flexible usará esta etiqueta de forma predeterminada. Y necesitamos utilizar el meta nombre = "viewport" generado por lib-flexible para lograr el efecto de adaptación de alta definición. 3. Debido a que el tamaño de fuente de html se calcula en función del ancho de la pantalla dividido por 10, debemos establecer el ancho máximo de la página en 10rem. 4. Si calculamos manualmente rem cada vez que medimos el tamaño del borrador del diseño, nuestra eficiencia será más lenta y puede haber errores de cálculo, por lo que podemos usar postcss-pxtorem o postcss-px2rem-exclude para agregar automáticamente css Convertir px en remiendo<meta name='viewport' >

postcss-pxtorem: convierte automáticamente px en el proyecto a rem

Nota:
1. postcss-pxtorem convertirá px a rem para adaptarse a pantallas de diferentes anchos y <html>calculará el resultado en función del valor del tamaño de fuente de la etiqueta, es decir, 1rem = el valor del tamaño de fuente de la etiqueta html.
2. Para los estilos en línea, postcss-pxtorempx no se puede convertir a rem, así que no escriba estilos en línea que requieran estilos adaptables, como tamaño de fuente, ancho, alto, etc. De la misma manera, los estilos que no requieren conversión se pueden escribir en línea o usar PX (mayúsculas) como unidad.
3. Si no desea que una determinada línea de código en el estilo de archivo .vue se convierta a rem, simplemente escriba un comentario /* no*/ al final.