标签:
(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); /*DOMContentLoaded文档加载完成不包含图片资源 onload包含图片资源*/ })(document, window);
//使用JS控制rem作为单位进行计算 window.onload=function(){ //1、首次加载时,调用动态设置rem的api setRemSize(); //2、当用户企图更改浏览器宽度 自动获取屏幕宽度,再计算rem赋值给根元素的font-size window.addEventListener(‘resize‘,setRemSize,false);//resize--浏览器宽度改变时触发 /*window.onresize=function(){ //onresize浏览器尺寸改变事件 setRemSize(); }*/ function setRemSize(){ //在任何尺寸中都可以获得rem值 //获得屏幕的宽度 rem=屏幕宽度/7.5+"px" var _clientWidth=document.documentElement.clientWidth/7.5+‘px‘; console.log(_clientWidth); //将得到的rem值复制给根元素的font-size document.documentElement.style.fontSize=_clientWidth; } }
以上两种方法实质性是一样的,都是通过控制根目录的font-size来达到屏幕适配。
标签:
原文地址:http://www.cnblogs.com/xiamer/p/5732473.html