A brief discussion on the perfect adaptation solution for Vue mobile terminal

Preface: Based on a recent medical mobile project, how does Vue adapt to different screen sizes on different screens?

1. Adaptation solution

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

First, let me introduce amfe-flexible

amfe-flexible is a flexible layout configuration scheme, mainly setting 1rem to viewWidth/10.

Then there is this library postcss-pxtorem

postcss-pxtorem is a postcss plugin that converts pixel units to rem units.

2. How to use and configure?

1. Install amfe-flexible and postcss-pxtorem

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

2. After the installation is complete, it must be introduced before it can be used

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

import 'amfe-flexible';

This import is OK

3. Then comes the postcss-pxtorem configuration steps

To configure postcss-pxtorem, you can configure it in one of vue.config.js, .postcssrc.js, and postcss.config.js. The weight decreases from left to right. If there is no such file, create a new file. You only need to set one of them:

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

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

Configure in .postcssrc.js or postcss.config.js as follows:

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

Note:
1. Set rootValue according to the width of the design divided by 10. Here, assuming the design is 375, rootValue is set to 37.5.
2. propList is used to set the properties that need to be converted. Here, * means all properties are converted.

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

For example, in our 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, and the plug-in helps us convert units automatically.

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}

This is the end of this article about the perfect adaptation solution for vue mobile terminals. For more relevant content about the perfect adaptation solution for vue mobile terminals, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!