(function(doc, win) {
var docEl = win.document.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
/**
* ================================================
* 设置根元素font-size
* 当设备宽度为375(iPhone6)时,根元素font-size=16px;
× ================================================
*/
var refreshRem = function() {
var clientWidth = win.innerWidth ||
doc.documentElement.clientWidth ||
doc.body.clientWidth;
if(!clientWidth) return;
var fz;
var width = clientWidth;
fz = 100 * width / 750;
docEl.style.fontSize = fz + 'px';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
refreshRem();
})(document, window);
使用:
1.单独建一个pxTorem.js文件,<script type="text/javascript" src="/js/pxTorem.js"></script>
引入html;
2.直接写在.html中,用<script type="text/javascript">上方js代码</script>
包起来即可。
以750的设计稿为例,宽为300px,高为200px的标签div,宽高直接除以100即可把px转为rem。css
如下:
div{
width:3rem;
height:2rem
}
结束。