监听屏幕在大小改变 ,recalc 是计算方法
window.addEventListener(resizeEvt,recalc,false);
计算原理是
rem 就是帮我们把设计图实现一个等比缩放的过程,
假如设计图是按 640px 来设计的,那么我把设计图分成 10份(随你自己分),
也就是 640px = 10rem,那么就是 1rem = 64px, 在根元素 html 上设置的 font-size 实际就是给网页的一个标准,它的px是多少,那么子级的 1rem 就等于多少
那么在 640px的屏幕下,根元素 html 的font-size 就可以计算为 640/10,
但是屏幕是不指定大小的,如果屏幕缩小的,那么根元素的值也要按百分比来缩小,如:
屏幕如果缩到了一半 320 , (320/640)*(640/10)(屏幕宽度/设计图) *(设计图/设计图的总分成)
我们公司是按苹果5宽度 320px 的设计图来做的,然后我把设计图分成16份,也就是16rem,
那么我的 1rem = 320/16 = 20px,那么公式就是 (屏幕宽度/320) *(320/16)
然后改变 html 标签的fontSize
html.style.fontSize = 20*(width/320)+"px";
完整代码
(function(doc, win) {
var docEl = doc.documentElement, //getElementById("luckDraw")
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
//if (!clientWidth) return;
if(clientWidth<600){
var width = clientWidth;
}else{
var width = 600;
}
docEl.style.fontSize = 20 * (width / 320) + 'px';
//宽与高度
//document.body.style.height = clientWidth * (900 / 1440) + "px"
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
小程序的 rem 使用
小程序中规定共有 750个物理像素
例如:设计稿640px宽度此时1rem = (640/20)rpx = 32px
例如:设计稿320px宽度此时1rem = (320/20)rpx = 16px
小程序中rpx与px的转换
例如:设计稿640px宽度那么很遗憾,你需要转换一下 1px = 750/640 rpx
在 iPhone6 上,屏幕宽度为375px ,750/375 = 2rpx ,也就是说 1px = 2rpx ,刚好是整数,所以最好设计图是以 iPhome6 为标准