Bootstrap

VUE中让字体大小跟随窗口变化

背景

写了一个VUE显示时间的组件,但显示不随浏览器窗口大小改变
没有图片描述

方法

**1.**在vue脚手架的html文件中引入flexible.js的文件

    <script src="static/lib/flexible.js"></script>

**2.**在编辑文字格式如font—size的时候用rem,不用px

   .time-chart{
        position: relative;
        line-height: 0.1rem;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont";
        font-size:1rem; 
        top: 50%;
   }

之后打开网页看大小是否合适,通过改数值,调成到合适大小

PS
rem是一个基准值,可以通过cssrem插件修改。

;