vue中响应式布局如何将字体大小改成自适应
短信预约 -IT技能 免费直播动态提醒
响应式布局将字体大小改成自适应
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：设计稿的宽度
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
