字体响应式变化大小

朗Fleur

已于 2022-11-21 11:21:55 修改

阅读量630

点赞数 1

文章标签： html css3 css

于 2022-06-15 14:01:51 首次发布

本文链接：https://blog.csdn.net/qq_46130081/article/details/125295910

版权

1.根据第一次获取的屏幕宽度来设置字体大小

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

2.当宽度改变时就调用上面该方法

   textResize() {  // 字体自适应
      let self = this;
      window.onresize = function () {
        self.textSize();
      };
    },

3.style的样式

/* 手机屏幕的字体大小 */
@media screen and (max-width: 768px) {
  #app {
    font-size: 0.08rem;
  }
}
/* 笔记本电脑的字体大小 */
@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;
  }
}