当前位置：前端开发者 > JavaScript > 正文

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

2018-12-24 分类：JavaScript 阅读(717) 评论(0)

微信公众号前端开发

开发微信小程序前端

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

前端微信开发视频教程

前端开发微信小程序