How vue uses rem for mobile screen adaptation (with code)

The content of this article is about how vue uses rem for mobile screen adaptation (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

If you want to adapt and use rem on the mobile terminal, you need to read this article first. After configuring less, you can use rem

If the project has been almost developed, it is useless. To use rem again, you use this trick.

postcss-pxtorem: Plug-in for converting px to rem

Installation postcss-pxtorem

npm install postcss-pxtorem --save

Newrem .js file

const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

and reference it into the main.js file

import './rem'

Modification .postcssrc.js file

Add the following configuration to the plugins in the .postcssrc.js file. After configuration, you can use the px unit directly during development. Developed

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

helloworld.vue

<template>
  <div class="hello">
    test
  </div>
</template>

<script>
  export default {
    name: &#39;HelloWorld&#39;,
    data() {
      return {
        msg: &#39;Welcome to Your Vue.js App&#39;
      }
    }
  }
</script>

<style scoped>
  .hello {
    text-align: center;
    font-size: 20px;
    width: 300px;
    height: 400px;
    background:red;
  }
</style>

effect

The above is the detailed content of How vue uses rem for mobile screen adaptation (with code). For more information, please follow other related articles on the PHP Chinese website!