移动端适配

一、rem适配

移动端适配处理方式
（1）监听resize修改documentElementFontSize值
（2）页面内元素使用rem 比例1:100
（3）超过某个宽度(eg：750px)，FontSize固定以适配PC端
（4）固定FontSize的PC端使用css @media 做样式的兼容处理

JS监听修改fontSize

(function($) {
    (function(doc, win) {
        var docEle = doc.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var recalc = function() {
        	var clientWidth = docEle.clientWidth;
        	if (!clientWidth) return false;
        	// 750根据设计图的原始比例尺寸进行调整
        	// 视口>=750以上 fontSize 固定
        	if (clientWidth >= 750 ) {
				docEle.style.fontSize = '45px';
			} else {
				docEle.style.fontSize = 100 * (clientWidth / 750) + 'px';
			}
		};

        if (!doc.addEventListener) return false;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
})(jQuery);

css @media 兼容处理

// 750px 以下
@media only screen and (max-width: 750px) { }
// 750px ~ 1919px
@media only screen and (min-width: 750px) and (max-width: 1919px) { }
// 1920px 以上
@media only screen and (min-width: 1920px) { }

二、页面缩放适配

    ;window.addEventListener('load', function() {
        if("ActiveXObject" in window) return $("body").css("min-width", "1200px");
        
        var width = window.innerWidth;
        var new_width = (width / 1920);
        $('body').css('zoom', new_width);
        // var height = window.innerHeight;
        // var new_height = (height / 969);
        // $('body').css('zoom', new_height);
        
        window.addEventListener('resize', function() {
            var width = window.innerWidth;
            var new_width = (width / 1920);
            $('body').css('zoom', new_width);
        });
    });