WEB前端开发基于rem的屏幕适配方案

微信公众号前端开发
微信公众号 前端开发
开发微信小程序前端

javascript 代码

function resizeHtmlFont() {
    var hW = $(‘html’).width()
    $(‘body,html’).attr(‘style’, ‘font-size:’ + hW / 16 + ‘px !important;’)
}
$(document).resize(function() {
    resizeHtmlFont()
})
addEventListener(‘orientationchange’, function(e) {
    e.preventDefault()
})
resizeHtmlFont()

主要思路是根据浏览器宽度动态设置跟元素的字号,然后全部页面元素都使用rem进行布局,即可实现根据不同屏幕宽度进行适配。

唯一会存在的问题就是横屏和竖屏时跟元素字号无法正常重算,现在是一直在用setInterval~

微信 前端 开发 zhihu
前端微信开发视频教程
前端开发微信小程序
» 本文来自:前端开发者 » 《WEB前端开发基于rem的屏幕适配方案》
» 本文链接地址:https://www.rokub.com/7236.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!