最简单的移动端适配方案

目前最流行的方案当属淘宝的flexible了，由于以前一直作服务端开发，对前端不是很了解。对于这套方案看了n久仍是不太理解，后来本身学习viewport的相关概念，捉摸出一套本身的办法（至少我没查到有人这么干的...），写在这里和你们分享一下

其实对于多数的移动h5的适配需求并无那么繁琐，只要保证和设计稿比例一致，在各类奇葩屏幕都可以显示出完整的信息就能够了。因此这里不讨论retina屏幕图片模糊问题，只考虑适配

需求：

1. 经过设计稿各类标注，解决css中尺寸和单位问题
2. 保证各类手机可以完整显示内容，比例和设计稿一致
3. 若是但愿作retina适配，多一步计算dpr并按需加载图片就好了

假定设计稿为750px

方案一：

必备知识：rem
在html中设置font-size为10px，那么1rem就为10px，因此想表示宽度为100px的div那就用10rem

• 获取手机屏幕真实宽度：

window.innerWidth;

• html的font-size：

var rem = window.innerWidth/750;

这里须要说明一下，除以750是除以设计稿的宽度。设计稿中的1px换作其余屏幕中就是 其余手机屏幕尺寸的1/750，也就是1rem。

• 动态设置rem大小

var docEl = document.documentElement;
var fontEl = document.createElement('style');
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';

这个时候就尽情玩耍吧，100px就写做100rem，字体的话也直接写rem。

方案二：

首先要理解viewport的概念，能够参考这篇文章，写的很详细文
移动前端开发之viewport的深刻理解。总结下来就是viewport在移动端是可变的，咱们把这个叫作layout viewport。默认都比手机的屏幕大不少（多数都是980px）。若是什么都不设置，咱们的px都是相对于这个layout viewport而言的。因此正常状况下咱们在手机上看pc的页面都是看不全的，可是各个手机厂商的作法不太同样，有的就是看不全了，只显示一个角落，可是例如iphone这种就会对页面进行缩放，让整个pc页面都挤进你的小屏幕中，因此看到的字体或者图片自己也就小了。若是仍是不明白呢也不要紧。按照下面的作法作就能够了。

以前提到全部的px都是相对layout viewport而言的，750的设计稿中100px是相对750px宽度，若是让手机也认为本身的layout viewport是750px，那么全部的尺寸换算就交给系统本身完成就好了。因此：

<meta name="viewport" content="width:750,user-scalable=no"/>

设置好以后，按照设计稿元素尺寸直接写100px就是想要的效果了

总结：
以上就是我对移动端处理的办法，简单并且有效。不须要复杂的js代码，不用less，scss也能正常使用。若是要说缺点的话也就是随着屏幕尺寸增大或者缩小，字体也会随着增大缩小，并不会像淘宝那种在视觉感官上的大小不变，不过我以为对于绝大多数的h5页面是不必这么作的。

由于是刚刚转作前端，说的不对的地方还请多多指出，谢谢！ 另外，始终不太理解淘宝对于字体大小不变的方案是怎么解决的，若是可以用简单的几句话讲明白这个原理但愿能告知下哈！