常见移动web布局适配方法 rem+js控制适配屏幕

常见移动web布局适配方法

• 固定高度，宽度百分比：这种方法只适合简单要求不高的webApp，几乎达不到大型项目的要求，属于过时的方法。
• Media Query（媒体查询）：现在比较主流的适配方案，比如我们常用的样式框架Bootstrap就是靠这个起家的，它能完成大部分项目需求，但是编写过于复杂。
• flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

rem单位介绍

rem（font size of the root element）是相对长度单位。相对于根元素（即html元素）font-size计算值的倍数。

• 适配原理：将px替换成rem，动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。

JS控制适配屏幕

明白了REM的原理后，我们就可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。当然你有更好的方案，也可以在文章下方进行留言。

1. 第一种方式：三行JS代码完成适配（推荐此种）

   <script>
		//得到手机屏幕的宽度
		let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
		if(htmlWidth>750){htmlWidth=750} //当页面很大的时候，解决页面字体过大的问题
		//得到html的Dom元素
		let htmlDom = document.getElementsByTagName('html')[0];
		//设置根元素字体大小
		htmlDom.style.fontSize= htmlWidth/16 + 'px';
	</script>

2. 第二种方式：

  <script>
		var w = innerWidth;
	    // console.log(w);
	    if(w>=750){w=750}  //宽度750可以自行调整
	    document.documentElement.style.fontSize = w / 16 + 'px';
	    window.onresize = function() {
	        w = innerWidth;
	        if(w>=750){w=750}
	        document.documentElement.style.fontSize = w / 16 + 'px';
	    }
	</script>