const getFontSize = () => {
let doc = document, win = window;
let docEl = doc.documentElement;
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let recalc = () => {
let 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 );
}
//使用方式很简单，比如效果图上，有张图片。宽高都是100px;
//样式写法就是
img{
width:1rem;
height:1rem;
}
//这样的设置，比如在屏幕宽度大于等于750px设备上，1rem=100px；图片显示就是宽高都是100px
//比如在iphone6(屏幕宽度：375)上，375/750*100=50px;就是1rem=50px;图片显示就是宽高都是50px;
根据手机屏幕大小适配rem
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前段时间遇到一个需求，应用内的字体大小需要根据当前屏幕尺寸变化，之前合作的同事写了这部分代码，但最近发现方法有漏洞...
