rem 自适应、整体缩放

html{
font-size: calc(100vw/7.5);
}

说明:
100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px。

若是低版本的设备不支持rem,那么就需要js来处理一下:

document.documentElement.style.fontSize = window.innerWidth/7.5 + 'px'

(function() {
var doc = document,
win = window;
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
//如果屏幕大于750(750是根据我效果图设置的,具体数值参考效果图),就设置clientWidth=750,防止font-size会超过100px
if(clientWidth > 750) { clientWidth = 750 }
//设置根元素font-size大小
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
//屏幕大小改变,或者横竖屏切换时,触发函数
win.addEventListener(resizeEvt, recalc, false);
//文档加载完成时,触发函数
doc.addEventListener('DOMContentLoaded', recalc, false);
})();

猜你喜欢

转载自www.cnblogs.com/hellofangfang/p/9593150.html