博客

App.vue中：

<template>
  <div id="app">
    <span class="text">ABCDEFG</span>
    <router-view/>
  </div>
</template>

<script>

export default {}
// 当DOM加载完毕时，设置html元素的fontSize
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize // 设置最大为50
  html.style.fontSize = fontSize + 'px'
})
</script>

<style>
  .text{
    font-size: 1rem;
  }
</style>

配置完成后调整浏览器宽度，查看文字样式



可以看到计算后的font-size大小（图示中浏览器宽度大于500px，所以字体大小取了50px）

但是这样有个不方便的地方，那就是我们每次都要去自己把想要的px值转换为rem值，所以我们不如在全局css中定义一个方法

px2rem

实现px到rem的转换：

.main.js中：

import './assets/styles/global.scss' // 引入一个全局css

global.scss中：

$ratio: 375/10; //定义变量ratio

@function px2rem($px){/*$px是传入的形参*/
  @return $px / $ratio + rem;
}

App.vue中：

<style lang="scss" scoped>
  /*注意这里要加lang="scss",否则会无法识别px2rem()*/
  /*@import "./assets/styles/global.scss";*/
  /*若没有在main.js中引入global.scss，则要加入上一行*/
  .text{
    font-size: px2rem(20); 
  }
</style>