vue中响应式布局将字体大小改成自适应

1. 在app.vue的生命周期函数中添加一段代码来设置页面的rem

  mounted: function() {
    // 页面开始加载时修改font-size
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    // 这里的750是指设计图的大小,自己根据实际情况改变
    html.style.fontSize = oWidth / 750 * 100 + "px";
    console.log('rem:', html.style.fontSize);
  }

2. 在style中使用媒体查询来进行阶段性的字体大小设置(这个自己调整试一试,我调的可能不合适)

/* 手机屏幕的字体大小 */
@media screen and (max-width: 768px) {
  #app {
    font-size: 0.05rem;
  }
}
/* 笔记本电脑的字体大小 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #app {
    font-size: 0.08rem;
  }
}
/* 台式电脑显示器屏幕字体大小 */
@media screen and (min-width: 1024px) {
  #app {
    font-size: 0.08rem;
  }
}

3. 然后页面的默认字体大小设置好了,之后局部样式的字体大小就自行调整
4. 要注意的是,字体大小的设置以后都要用rem,这样是为了以后动态的修改全局字体样式方便