您现在的位置是：网站首页> 编程资料编程资料

vue中响应式布局如何将字体大小改成自适应_vue.js_

2023-05-24 235人已围观

简介 vue中响应式布局如何将字体大小改成自适应_vue.js_

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

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,这样是为了以后动态的修改全局字体样式方便 

vue文字大小自适应问题

font-size:calc(100vw * 24 / 1920); 
  • calc：是一个css自带的计算方法，可以自动计算后返回px单位的值
  • 100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。
  • *100：这里乘的100代表100px。
  • 1920：设计稿的宽度

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：vue如何使用媒体查询实现响应式_vue.js_

下一篇：JavaScript Canvas实现噪点滤镜回忆童年电视雪花屏_JavaScript_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网