vue如何使用rem進行行動裝置螢幕適配（附代碼）

這篇文章帶給大家的內容是關於vue如何使用rem進行行動裝置螢幕適配（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

要想移動端適配並使用rem  您需要先看這篇文章，配置好less就可以使用rem了

如果專案已經開發的差不多了，沒有用到rem 又要使用rem，您用這招。

postcss-pxtorem：轉換px為rem的外掛程式

安裝 postcss-pxtorem

npm install postcss-pxtorem --save

新建rem .js檔案

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()
}

並引用進main.js檔案內

import './rem'

 修改

# .postcssrc.js 檔案

在

.postcssrc.js檔案內的 

plugins 加入以下配置，配後就可以在開發中直接使用 

px

 單位開發了

    "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>

###效果################################################################

以上是vue如何使用rem進行行動裝置螢幕適配（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！