How to use rem to adapt Mobile screen in vue

In this article, Xiaobian introduces in detail "how to use rem to adapt mobile screen in vue". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use rem to adapt mobile screen in vue" can help you solve your doubts.

Install postcss-pxtorem

Npm install postcss-pxtorem-save

Create a new rem.js file

Const baseSize = 32max / set rem function function setRem () {/ / the scale of the current page width relative to 750W can be modified according to your own needs. Const scale = document.documentElement.clientWidth / 750 / / set the font size of the root node of the page document.documentElement.style.fontSize = (baseSize * Math.min (scale, 2)) + 'px'} / / initialize setRem () / / reset rem_window.onresize = function () {setRem ()} when changing the window size

And referenced into the main.js file

Import'. / rem'

Modify the .postcssrc.js file

Add the following configuration to the plugins in the .postcssrc.js file, and then you can directly use the px unit in the development.

"postcss-pxtorem": {"rootValue": 32, "propList": ["*"]}

Helloworld.vue

Test export default {name: 'HelloWorld', data () {return {msg:' Welcome to Your Vue.js App'} .hello {text-align: center; font-size: 20px; width: 300px; height: 400px; background:red;}

Effect.

Add: let's take a look at the layout of Vue with rem

Using vue.js to build a mobile project, how to achieve adaptive? Of course, it is relatively convenient and quick to choose rem layout.

After building the project framework using vue-cli, add a piece of code to the index.html file of the directory structure:

FnResize () _ window.onresize = function () {fnResize ()} function fnResize () {var deviceWidth = document.documentElement.clientWidth | | window.innerWidthif (deviceWidth > = 750) {deviceWidth = 750} if (deviceWidth)