[Vue][Sass]配置在不同宽度时的html.style.fontsize值，并通过rem适配

深藏阁楼爱情的钟 2022-12-03 02:23 131阅读 0赞

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

配置完成后调整浏览器宽度，查看文字样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center]  
可以看到计算后的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中：**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/379b8c5d350b4697b953478255fb539d.png