vue项目PC端字体大小自适应

最新推荐文章于 2024-04-29 08:32:24 发布

一只小 Ziyi.

最新推荐文章于 2024-04-29 08:32:24 发布

阅读量3.7k

点赞数 4

分类专栏： Vue 文章标签： html javascript html5

本文链接：https://blog.csdn.net/mai0824/article/details/119957460

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在App.vue文件中基于Vue.js动态调整页面的font-size，以适配不同屏幕尺寸。通过监听窗口宽度，设置html元素的font-size，确保设计在不同设备上的一致性。同时，使用媒体查询@media处理不同屏幕宽度下的字体适配，确保在1396px到1920px之间的屏幕，字体大小会相应变化。

摘要由CSDN通过智能技术生成

在App.vue文件中直接放入以下代码即可

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted: function () {
    // 页面开始加载时修改font-size
    var html = document.getElementsByTagName("html")[0];
    var oWidth =
      document.body.clientWidth || document.documentElement.clientWidth;
    // 这里的1920是指设计图的大小,自己根据实际情况改变
    html.style.fontSize = (oWidth / 1920) * 100 + "px";
    console.log("rem:", html.style.fontSize);
  },
};
</script>
<style lang="scss" scoped>
//这些屏幕宽度是根据我自己需要设置的
@media screen and (max-width: 1396) {
  #app {
    font-size: 0.16rem;
  }
}
@media screen and (min-width: 1396) and (max-width: 1536px) {
  #app {
    font-size: 0.5rem;
  }
}
@media screen and (min-width: 1536px) and (max-width: 1920px) {
  #app {
    font-size: 1rem;
    //我这里是按1920的屏幕宽度设置的，所以1rem相当于100px
  }
}
@media screen and (min-width: 1920px) {
  #app {
    font-size: 0.16rem;
  }
}
</style>