Comment vue utilise rem pour l'adaptation d'écran mobile (avec code)

Le contenu de cet article explique comment vue utilise rem pour l'adaptation sur écran mobile (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Si vous souhaitez adapter et utiliser rem sur le terminal mobile, vous devez d'abord lire cet article Après avoir configuré moins, vous pouvez utiliser rem

Si le projet est presque terminé. développé, cela ne sert à rien. Pour utiliser rem à nouveau, vous utilisez cette astuce.

postcss-pxtorem : Plugin pour convertir des px en rem

Installer postcss-pxtorem

npm install postcss-pxtorem --save

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

et référencez-le dans le fichier main.js

import './rem'

Modifier le .postcssrc.js fichier

Ajoutez la configuration suivante aux .postcssrc.js文件内的 plugins. Après configuration, vous pouvez l'utiliser directement en développement px Développé par l'unité

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

Effet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!