跟着移动设备的普及，移动web在前端工程师们的事情中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和辨别率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了差别屏幕的设计图，功效可想而知。本篇文章分享了一些措置惩罚惩罚多屏幕自适应的经验，但愿有益于列位。
出格说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

简单工作简单做-宽度自适应
所谓宽度自适应严格来说是一种pc真个自适应构造方法在移动真个延伸。在措置惩罚惩罚pc真个前端界面时候需要用到全屏构造时给与的就是此种构造方法。它的实现方法也对照简单，将外层容器元素凭据百分比铺满的方法，里面的子元素固定或者摆布浮动。

.div { width:100%; height:100px; } .child { float: left; } .child { float:right; }

由于父级元素给与百分比的构造方法，跟着屏幕的拉伸，它的宽度会无限的拉伸。而子元素由于给与浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的要领，跟着弹性构造的普及，它经常被flex的伸缩性构造方法替代，变得越来越“弹性”十足。需要了解弹性构造，请前往flex构造教程。

巨细之辨-完成自适应

这种解决方案相对前一种来说进步不少，不只仅宽度实现了自适应，而且界面所有的元素巨细和高度城市按照差此外辨别率和屏幕宽度的设备来调解元素、字体、图片、高度等属性的值。简单来说就是在差此外屏幕下，你看到的字体和元素高度的巨细是不一样的。在这里，有人就会说操作的是媒体盘问属性，按照差此外屏幕宽度，调解样式。我之前也是这样想的，但是你需要考虑到界面上的许多元素需要设置字体，如果用media query为每个元素在差此外设备下都设置差此外属性的话，那么有几多中屏幕我们的css就会增加几多倍。实际上在这里，我们给与的是js和css属性rem来解决这个问题的。
REM属性指的是相对付根元素设置某个元素的字体巨细。它同时也可以用作为设置高度等一系列可以用px来标注的单位。

html { font-size: 10px; } div { font-size: 1rem; height: 2rem; width: 3rem; border: .1rem solid #000; }

给与以上写法，div担任到了html节点的font-size，为自己界说了一系列样式属性，此时1em计算为10px，即根节点的font-size值。所以，这时div的高度就是20px，宽度是30px，边框是1px，字体巨细则是10px；一旦有了这样的要领，我们自然可以按照差此外屏幕宽度设置差此外根节点字体巨细。假设我们此刻设计的标准是iphone5s，，iphone5系列的屏幕辨别率是640。为了统一规范，我们将iphone5 辨别率下的根元素font-size设置为100px;

<!--iphone5--> html { font-size: 100px; }

那么以此为基准，可以计算出一个比例值6.4。我们可以得知其他手机辨别率的设备下根元素字体巨细：

/* 数据计算公式 640/100 = device-width / x 可以设置其他设备根元素字体巨细 ihone5: 640 ： 100 iphone6: 750 : 117 iphone6s: 1240 : 194 */ var deviceWidth = window.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px‘;

在head中，我们将以上代码插手，动态地转变根节点的font-size值。
接下来我们可以按照根元素的字体巨细用rem设置各类属性的相对值。固然，如果是移动设备，屏幕会有一个上下限制，我们可以控制辨别率在某个范畴内，赶过了该范畴，我们就不再增加根元素的字体巨细了：

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px‘;

一般的情况下，你是不需要考虑屏幕动态地拉伸和收缩。固然，假如用户开启了转屏设置，在网页加载之后转变了屏幕的宽度，那么我们就要考虑这个问题了。解决此问题也很简单，监听屏幕的变革就可以做到动态切换元素样式：

window.onresize = function(){ var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px‘; };

为了提高性能，让代码开起来越发完美，可以为它加上节流阀函数：

window.onresize = _.debounce(function() { var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth / 6.4) + ‘px‘; }, 50);