一、问题描述
在做移动端h5页面开发的时候,rem的使用简直是屏幕适配的利器,但是,它在也存在兼容性问题:
在微信内置浏览器及华为小米内置及QQ浏览器访问rem做的h5的时候,由于设置部分字体过小,以上浏览器为了满足浏览需要,强制限制了html最小字体,虽然我们代码设置了html,body的字号,但并未生效,从而影响了页面布局!
二、rem的使用
之前我已经整理过了如何使用rem的方法,这里只是为了解决bug,就不展开说明了:附:如何使用rem适配移动端及移动端适配的其他方法汇总
三、解决方法
- 此版本应用于 750px尺寸的 iOS 设计稿
- rem计算方式:设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem,1px = 0.01rem】
3.1 media.js复制即用
!function (window) {
setTimeout(function () {
/* 设计图文档宽度 */
var docWidth = 750;
var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = (function refreshRem() {