vue中响应式布局如何将字体大小改成自适应
更新时间：2022年09月19日 09:10:55 作者：蓝枫秋千
这篇文章主要介绍了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,这样是为了以后动态的修改全局字体样式方便
vue文字大小自适应问题
font-size:calc(100vw * 24 / 1920);
calc：是一个css自带的计算方法，可以自动计算后返回px单位的值100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。*100：这里乘的100代表100px。1920：设计稿的宽度
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧2019-04-04
这篇文章主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了Vue在启动时卡住了,启动不了的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了vue中使用h5 video标签实现弹窗播放本地视频的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了Vue中父子组件如何实现传值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue实现进度条变化效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了Object.assign触发watch原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
Vue-cli3 $ is not defined错误问题及解决
这篇文章主要介绍了Vue-cli3 $ is not defined错误问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果。本文通过截图代码的形式给大家介绍Vue.js实现大屏数字滚动翻转效果，感兴趣的朋友一起看看吧2019-11-11
这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论