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页面中引入img图片的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了Vue使用Echart图标插件之柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了VUEX-action可以修改state吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue中的混入的使用(vue mixins)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了如何解决ElementUI导航栏重复点菜单报错问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇Vue根据条件添加click事件的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本篇文章主要介绍了Vue Spa切换页面时更改标题的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了vue循环数组改变点击文字的颜色，非常实用的切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了vant组件中 dialog的确认按钮的回调事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论