On the Perfect Adaptation Scheme of vue Mobile Terminal

According to a recent medical mobile phone project summarized in the mobile terminal, how does vue adapt according to different screen sizes on different screens

1. Adaptation scheme

The vue mobile scheme I used in this project is a combination of amfe-flexible and postcss-pxtorem.

Firstly, amfe-flexible under 1 is introduced

amfe-flexible is a scalable layout scheme, which mainly sets 1rem to viewWidth/10.

Then there is this library postcss-pxtorem

postcss-pxtorem is a plug-in to postcss for generating pixel units into rem units.

2. How to use and configure it?

1. Install amfe-flexible and postcss-pxtorem

npm install amfe-flexible --save
npm install postcss-pxtorem --save

2. After the installation is completed, it must be imported before it can be used

We need to introduce it in main. js to use it

import 'amfe-flexible';

In this way, OK is introduced

3. Then there is the postcss-pxtorem configuration step

Configure postcss-pxtorem, which can be configured in one of vue. config. js,. postcssrc. js, postcss. config. js. The weight is reduced from left to right. If there is no new file, only one of them needs to be set:

For convenience, the code configuration I configured in vue. config. js is as follows:

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

Configure the following in. postcssrc. js or postcss. config. js:

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

Note:
1. rootValue is set according to the width of the design draft divided by 10. Here, it is assumed that the design draft is 375, that is, rootValue is set to 37.5;
2. propList is to set the properties that need to be converted, and * here is to convert everything.

With the above configuration, we can use it in the project.

For example, in the project, we wrote this:

.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. Plug-in benefits help us automatically convert units.

login-wraper .login-form {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: .53333rem; //  Note that this is the converted unit 
    box-sizing: border-box;
    border-radius: .26667rem;  //  Note that this is the converted unit 
}