Maison >interface Web >js tutoriel >Comment vue utilise rem pour l'adaptation d'écran mobile (avec code)

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

不言
不言original
2018-09-27 15:35:188550parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn