Wie Vue rem für die mobile Bildschirmanpassung verwendet (mit Code)

Der Inhalt dieses Artikels handelt davon, wie Vue REM für die mobile Bildschirmanpassung verwendet (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Wenn Sie rem auf dem mobilen Endgerät anpassen und verwenden möchten, müssen Sie zuerst diesen Artikel lesen. Nachdem Sie weniger konfiguriert haben, können Sie rem verwenden

Wenn das Projekt fast abgeschlossen ist entwickelt, ist es nutzlos, rem erneut zu verwenden.

postcss-pxtorem: Plug-in zum Konvertieren von px in rem

Installieren postcss-pxtorem

npm install postcss-pxtorem --save

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

und referenzieren Sie es in die main.js-Datei

import './rem'

Ändern Sie die .postcssrc.js-Datei

und fügen Sie sie hinzu it in .postcssrc.js文件内的 plugins Die folgende Konfiguration kann nach der Konfiguration direkt in der Entwicklung verwendet werden px Von der Einheit entwickelt

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

Wirkung

Das obige ist der detaillierte Inhalt vonWie Vue rem für die mobile Bildschirmanpassung verwendet (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!