手机页面文字大小自动适应的解决-CSDN博客

在手机页面开发时，会发现自己通过设计样式时，在开发时的浏览器上看到的果与在手机上实际运行时，效果是不一样的。因为手机屏幕的分辨率不一样，使设计出来的页面部局在很多手机上看到的页面布局不一致，虽然可以通过前端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作为单位，保证页面布局的自适应。

转载于:https://my.oschina.net/u/3527019/blog/2876700