移动端自适应rem方案，适合手机屏幕旋转

最新推荐文章于 2024-06-01 21:54:01 发布

天一城

最新推荐文章于 2024-06-01 21:54:01 发布

阅读量687

点赞数

本文链接：https://blog.csdn.net/qq_24511933/article/details/56488929

版权

移动端自适应rem方案，适合手机屏幕旋转

function adapt(designWidth, rem2px){ var d = window.document.createElement('div'); d.style.width = '1rem'; d.style.display = "none"; var head = window.document.getElementsByTagName('head')[0]; head.appendChild(d); var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width')); d.remove(); // document.documentElement.style.f window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%'; var st = document.createElement('style'); var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"; var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}" st.innerHTML = portrait + landscape; head.appendChild(st); return defaultFontSize
}; var defaultFontSize = adapt(640, 100);