js根据浏览器窗口宽度改变元素大小

注意：页面中的元素要使用rem，原理是通过改变外部fontSize的大小来改变内部所有使用rem单位的元素大小
jquery写法

//jqeury写法
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({
            fontSize: whei / 120
        })
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 120
            })
        });
    });
    

原生写法（需要自定义document.ready方法）

 // 原生写法：
 	// document是一个DOM对象，**本身是没有ready方法**，所以要自己定义
	// 这是第一种方法
	document.ready = function(callback) {
		// 兼容FF，Google
		if (document.addEventListener) {
			document.addEventListener('DOMContentLoaded', function() {
				document.removeEventListener('DOMContentLoaded', arguments.callee, false);
				callback();
			}, false)
		}
		//兼容IE
		else if (document.attachEvent) {
			document.attachEvent('onreadystatechange', function() {
				if (document.readyState == "complete") {
					document.datachEvent("onreadysttatechange", arguments.callee);
					callback();
				}
			})
		} else if (document.lastChild == document.body) {
			callback();
		}

	}
	// 这是第二种方法
	!(function() {
		var ie = !!(window.attachEvent && !window.opera);
		var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
		var fn = [];
		var run = function() {
			for (var i = 0; i < fn.length; i++) fn[i]();
		};
		var d = document;
		d.ready = function(f) {
			if (!ie && !wk && d.addEventListener)
				return d.addEventListener('DOMContentLoaded', f, false);
			if (fn.push(f) > 1) return;
			if (ie)
				(function() {
					try {
						d.documentElement.doScroll('left');
						run();
					} catch (err) {
						setTimeout(arguments.callee, 0);
					}
				})();
			else if (wk)
				var t = setInterval(function() {
					if (/^(loaded|complete)$/.test(d.readyState))
						clearInterval(t), run();
				}, 0);
		};
	})();
	//
	 document.ready(function(){
			// window.innerWidth
			var whei = document.body.clientWidth;
			document.querySelector('html').style.fontSize = (whei / 120) + "px"
			window.addEventListener('resize', function() {
				var whei = document.body.clientWidth;
				document.querySelector('html').style.fontSize = (whei / 120) + "px"
			})
		})

因为大多数屏幕的比例是1920px*1080px，因此120=1920/16(你想要的字体大小px)
我平时都是在制作大屏的时候会用到。

ready 和onload的区别

document.ready 和 window.onload 的区别是：上面定义的document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。