在手机页面开发时,会发现自己通过设计样式时,在开发时的浏览器上看到的果与在手机上实际运行时,效果是不一样的。因为手机屏幕的分辨率不一样,使设计出来的页面部局在很多手机上看到的页面布局不一致,虽然可以通过前端css3的@media方法,给不同分辨率的手机设计不同的字体字号 样式,或者使用rem单位,然而具体实现起来很不方便,如果遇到个别手机,页面布局可能仍会变化,为此,在实际开发时可以使用js文件,给页面的字体动态的设置html的字体大小,进而使用rem单位,即可很好保证页面的布局
1.首先创建一个js文件(fontsize.js)
(function(doc,win){ var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(!clientWidth) return; docEl.style.fontSize = 100*(clientWidth/375) + 'px'; }; //Abort if browser does not support addEventListener if(!doc.addEventListener) return; win.addEventListener(resizeEvt,recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false); })(document,window);
其中docEl.style.fontSize = 100*(clientWidth/375) 中的375是以手机宽度为375px的手机来编写页面的。具体可以自己改写。
使用时,可以先引入fontsize.js,这样写css样式 时,可以使用rem作为单位,保证页面布局的自适应。