验证中...
Languages: JavaScript
Categories: CSS 技巧
Latest update 2019-03-28 13:24
页面自适应JS,根据不同屏幕大小,自动适应内容
Raw Copy
function setRootFontSize() {
var width = document.documentElement.clientWidth, fontSize;
// fontSize = width>750?16:width/23.4375;
fontSize = width>750?100:width/7.5;
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
}
setRootFontSize();
window.addEventListener('resize', function() {
setRootFontSize();
}, false);
//方案二
rem()
window.onresize = ()=>rem()
// 当屏幕大小发生变化时执行 rem()
function rem() {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (htmlWidth > 750)
htmlWidth = 750
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlWidth / 375 * 100 + 'px';
// 如果宽度为375==>>1rem = 100px
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search