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：设计稿的宽度
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue2.X和Vue3.0数据响应原理变化的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在使用vue开发项目的时候,很多使用会import很多模块,这篇文章主要给大家介绍了关于vue中import导入三种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了vue开发之LogicFlow自定义业务节点,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue使用fengMap速度慢的原因分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue前后端分离如何解决每次请求session都会变的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在Vue中使用`el-switch`组件时,绑定数值类型时应使用布尔值（true/false）,而绑定字符串类型时应使用字符串（'true'/'false'）2024-12-12
这篇文章主要介绍了vant中的toast轻提示实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue.js实现可排序的表格组件功能,涉及vue.js事件响应、元素动态操作、排序、运算等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了vue通过v-show实现回到顶部top效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
vue+element-plus上传图片及回显问题及数量限制
本文主要介绍了vue+element-plus上传图片及回显问题及数量限制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论