Shulou(Shulou.com)05/31 Report--

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)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.