vue がモバイル画面の適応に rem を使用する方法 (コード付き)

この記事の内容は、vue がモバイル画面の適応にどのように使用するかについてです (コード付き)。必要な友人が参考になれば幸いです。

モバイル端末に rem を適応させて使用したい場合は、最初にこの記事を読む必要があります。less を設定した後、rem を使用できます。

プロジェクトがほぼ完了している場合。開発された場合、rem を再度使用するには、このトリックを使用します。

postcss-pxtorem: px を rem に変換するプラグイン

インストール postcss-pxtorem

npm install postcss-pxtorem --save

Newrem .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>

effect

以上がvue がモバイル画面の適応に rem を使用する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。