<script>
function _adaptFont(maxWidth, baseWidth, baseSize) {
maxWidth = 750; //最大值750px
baseWidth = 320;
baseSize = 16;
var winWidth = parseInt(window.innerWidth); /*s4手机读到的winWidth是分辨率的宽*/
var docWidth = parseInt(document.documentElement.clientWidth); //和winWidth区别是,减去右边滚动条
var bodyWidth = parseInt(document.body.clientWidth); //混合模式下使用
var docWidth = Math.min(winWidth, bodyWidth, docWidth);
docWidth > maxWidth && (docWidth = maxWidth);
docWidth < baseWidth && (docWidth = baseWidth);
//设置基准值
document.documentElement.style.fontSize = (docWidth / baseWidth) * baseSize + 'px';
}
(function() {
window.addEventListener("resize", _adaptFont);
window.addEventListener("load", _adaptFont);
})();
</script>
2.
<!--响应式计算-->
<script>
(function (w, d) {
function rem() {
d.getElementsByTagName('html')[0].style.fontSize = Math.min(d.documentElement.getBoundingClientRect().width, 500) * 100 / 375 + 'px';
}
rem();
w.onresize = rem;
})(window, document);
</script>
部分老手机显示有问题,最新的rem
(function(doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
dpr = 1,
scale = 1 / dpr,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc = function() {
var width = docEl.clientWidth;
if (width / dpr > 750) {
width = 750 * dpr;
}
// 乘以100,px : rem = 100 : 1
docEl.style.fontSize = 100 * (width / 750) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);