Example Analysis of perfect adaptation of vue Mobile Terminal

This article mainly introduces the example analysis of the perfect adaptation of vue mobile terminal, which has a certain reference value. Interested friends can refer to it. I hope you will learn a lot after reading this article.

1. Adaptation scheme

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

First of all, introduce amfe-flexible.

Amfe-flexible is a configuration scalable layout scheme, which mainly sets 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 it?

1. Install amfe-flexible and postcss-pxtorem

Npm install amfe-flexible-savenpm install postcss-pxtorem-save

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

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

Import 'amfe-flexible'

OK will be introduced in this way.

3. Then there are the steps of postcss-pxtorem configuration

Configure postcss-pxtorem, which can be configured in one of vue.config.js, .postcssrc.js or postcss.config.js. The weight is reduced from left to right. If not, create a new file. You only need to set one of them:

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: ['*']})}},}

The configuration in .postcssrc.js or postcss.config.js is as follows:

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, the design draft is assumed to be 375, that is, the rootValue is set to 37.5.

2. PropList is used to set the attributes to be converted. Here * all are converted.

Through the above configuration, we can use it 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;}}

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

Login-wraper. Login-form {width: 90%; position: absolute; top: 50%; left: 50%; transform: translate (- 50% border-box; border-radius 50%); background-color: # fff; padding: .53333rem; / / Note this is the converted unit box-sizing: border-box; border-radius: .26667rem / pay attention to this is the converted unit} Thank you for reading this article carefully. I hope the article "sample Analysis of perfect adaptation of vue Mobile" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!