Vue implements mobile and web page adaptation

vue mobile terminal

Description of the problem: How does vue adapt to different screen sizes on different screens

1. Introduction The way
   to use amfe-flexibleand postcss-pxtoremcombine
   amfe-flexible：is to configure the scalable layout scheme, mainly to 1remset it as a plug viewWidth/10- in, which is used to generate units from pixel units
   postcss-pxtorem：postcssrem
2. How to use
   (1) install amfe-flexibleandpostcss-pxtorem

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

   (2) Import: Introduce in main.js

   import 'amfe-flexible';
   

   (3) Configuration postcss-pxtorem
   Configuration postcss-pxtoremcan be configured in one of vue.config.js, , and the weight decreases from left to right. If there is no configuration, a new file is created, and only need to be set ;.postcssrc.jspostcss.config.js其中一个
vue.config.js

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

   ② Configure in .postcssrc.jsor as follows:postcss.config.js

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

Notice:

rootValueSet according to the width of the design draft divided by 10. Here, it is assumed that the design draft is 375, that is, rootValueit is set to 37.5;

propListIt is to set the attributes that need to be converted, and here * is to convert all.

For example, in the project we write:

.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;
    }
  }

Then the output of our code is as follows, the plug-in benefits help us automatically convert the unit

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;  // 注意这个就是转换后的单位
}

Forward link: https://juejin.cn/post/7008180094208311303