Vue implementa adaptación móvil y página web

terminal móvil vue

Descripción del problema: ¿Cómo se adapta vue a diferentes tamaños de pantalla en diferentes pantallas?

1. Introducción La forma
   de usar amfe-flexibley postcss-pxtoremcombinar
   amfe-flexible：es configurar el esquema de diseño escalable, principalmente para 1remconfigurarlo como un viewWidth/10complemento , que se utiliza para generar unidades a partir de unidades de píxeles.
   postcss-pxtorem：postcssrem
2. Cómo usar
   (1) instalar amfe-flexibleypostcss-pxtorem

   npm install amfe-flexible --save
   npm i postcss-pxtorem@5.1.1  --save  //这个要装5.1.1版本的
   

   (2) Introducción: Introducir en main.js

   import 'amfe-flexible';
   

   (3) Configuración postcss-pxtorem
   La configuración postcss-pxtoremse puede configurar en uno de vue.config.js, y el peso disminuye de izquierda a derecha.Si no hay configuración, se crea un nuevo archivo y solo se debe configurar ;.postcssrc.jspostcss.config.js其中一个
vue.config.js

   module.exports = {
         
         
       //...其他配置
       css: {
         
         
           loaderOptions: {
         
         
               postcss: {
         
         
                   plugins: [
                       require('postcss-pxtorem')({
         
         
                           rootValue: 37.5,
                           propList: ['*']
                       })
                   ]
               }
           }
       },
   }
   

   ② Configure en .postcssrc.jso como sigue:postcss.config.js

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

Aviso:

rootValueSe establece de acuerdo con el ancho del borrador de diseño dividido por 10. Aquí, se supone que el borrador de diseño es 375, es decir, rootValuese establece en 37.5;

propListEs para establecer los atributos que deben convertirse, y aquí * es para convertir todo.

Por ejemplo, en el proyecto escribimos:

.login-form {
    
    
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    .title {
    
    
      position: absolute;
      top: -50px;
      font-size: 24px;
      color: #fff;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

Luego, la salida de nuestro código es la siguiente, los beneficios del complemento nos ayudan a convertir automáticamente la unidad

login-wraper .login-form {
    
    
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: .53333rem; // 注意这个就是转换后的单位
    box-sizing: border-box;
    border-radius: .26667rem;  // 注意这个就是转换后的单位
}

Enlace directo: https://juejin.cn/post/7008180094208311303