Introduction: According to a recent medical mobile terminal project summarized in mobile terminal, how does VUE adapt to different screen sizes on different screens

1. Adaptation scheme

In this project, THE VUE mobile scheme I use is a combination of AMFE-Flexible and PostCSS-PxtoREM.

First, amFE-Flexible

Amfe-flexible is the configuration of scalable layout solution, mainly set 1rem to viewWidth/10.

And then there’s this library, postCSS-Pxtorem

Postcss – Pxtorem is a plug-in for PostCSS that generates REM units from pixel units.

2. How to use and configure?

1. Install AMFE-Flexible and PostCSS-PxtoREM

​
npm install amfe-flexible --save
npm install postcss-pxtorem --save
Copy the code

2, after the installation is completed, it must be introduced to use

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

import 'amfe-flexible';
Copy the code

And that’s OK to introduce

3. Then there are the PostCSS-PxtoREM configuration steps

Postcss-pxtorem can be configured in one of the following formats: vue. Config. js,. Postcsrc.

For convenience I am configured in vue.config.js with the following code configuration:

module.exports = { //... CSS: {loaderOptions: {postcss: {plugins: [require(' postCSs-pxtorem ')({rootValue: 37.5, propList: ['*']}]}}},}Copy the code

In. Postcsrc. Js or postcss.config.js, the configuration is as follows:

Module. exports = {"plugins": {'postcss-pxtorem': {rootValue: 37.5, propList: ['*']}}}Copy the code

Note:

1. Set rootValue by dividing the width of the design draft by 10. Assume that the design draft is 375, that is, set rootValue to 37.5.

2. PropList is used to set the attributes to be converted. This * is used to convert all attributes.

Through the above configuration we can use in the project.

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; }}Copy the code

The output of our code looks something like this, with plugins that 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; Box-sizing: border-box; box-sizing: border-box; border-radius: .26667rem; // Note that this is the converted unit}Copy the code

Ok, the above is vUE mobile end adaptation scheme. Take no thank