document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html')
let fontSize = window.innerWidth / 10
fontSize = fontSize > 50 ? 50 : fontSize
html.style.fontSize = fontSize + 'px'
})
rem
根据宽度动态设置字体大小
rem配置
rem 配置
document.addEventLister('DOMContentLoaded',()=>{
const html=document.querrySelector('html')
let fontSize=window.innerWidth/10
fontSize=fontSize>50?50:fontSize
html.style.fontSize=window.innnerWidth/10+'px'
})
rem配置
script中直接设置字体大小
window.innerWidth和window.outterWidth在移动端是没有区别的,都是指屏幕宽度;而在PC端,window.innerWidth指的是页面内容区域的宽度,不包含控制台部分的区域,而window.outterWidth代表的是窗口的宽度
用DOMContentLoaded事件绑定在document对象上,当页面的dom元素加载后,这个事件就会触发
rem配置,在dom加载完毕时,设置html标签的字体大小
rem配置
rem配置
rem配置,字体随屏幕大小自适应。在App.vue中添加
document.addEventListener("DOMContentLoaded", setFontSize);
window.addEventListener('resize', setFontSize)
function setFontSize() {
const html = document.querySelector("html");
let fontSize = window.innerWidth / 10;
fontSize = fontSize > 50 ? 50 : fontSize;
html.style.fontSize = fontSize + "px";
}
Rem根元素的设置
DOMContentLoaded事件动态设置根元素font-size
html.style.fontSize = window.innerWidth / 10 + 'px'
fontSize 设置
rem 配置
增加动态变化
document.addEventListener("DOMContentLoaded", setFontSize);
window.addEventListener('resize', setFontSize)
function setFontSize() {
const html = document.querySelector("html");
let fontSize = window.innerWidth / 10;
fontSize = fontSize > 50 ? 50 : fontSize;
html.style.fontSize = fontSize + "px";
}
1rem = 根元素font-size