利用rem进行移动端页面布局

前言：在移动端进行页面布局的时候，使用rem元素，可以适应不同手机屏幕尺寸下的情况，进行适配。写一个rem.js文件引入，样式中涉及高度、尺寸、字号等单位时，直接使用rem即可，简单方便快捷。

一、rem.js代码

(function (doc, win) {
	    var docEl = doc.documentElement,
	        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	        recalc = function () {
	            var clientWidth = docEl.clientWidth;
	            if (!clientWidth) return;
	            if(clientWidth>=750){
	                docEl.style.fontSize = '100px'; 
	            }else{
	                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
	            }
	        };
	    if (!doc.addEventListener) return;
	    win.addEventListener(resizeEvt, recalc, false);
	    doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);

二、实际运用

<div class="goods_wrap_title">全店商品</div>

.goods_wrap_title {
    color: #5E5E5E;
    font-weight: bold;
    font-size: .32rem;
    margin-bottom: .30rem;
    letter-spacing: 0.0084rem;
}

版权声明：本文为博主原创文章，未经博主允许不得转载 。