让新手能快速掌握的移动端自适应布局

一、百分比布局

我最开始的是用百分比布局的，这样的做法的话是比较费时间的，有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间，而且对于设计稿的还原也不好。所以这里>也不怎么推荐。

二、固定的设备宽度

在做移动开发的时候很多人都会加上viewport的配置，
那么固定设备宽度的布局就是根据这个来设置的，将viewport里面的宽度width设置成设计稿的宽度，也就是说原本是width=device-width，即宽度为设备的宽度，假如在iphone6上显示的时候，那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的，假如设计稿是750px，而我们的css也按设计的尺寸来做，例如一个图片是200px*200px，那么在css上也是宽高都是写200px,也就是1：1的比例。那么在375px的手机上显示的时候，就会缩小2倍显示，以此类推，在320px的宽度的时候，就会缩小2.3倍显示，在414px的宽度的时候就会缩小1.8倍。
这样的写法是会比较好的还原设计稿，而且速度也会比较快，但是这样也有缺点，在缩>小的时候有些设备会比较模糊，因为你强行将设备放大了。

三、rem布局

我现在常用的移动端布局主要是用rem布局，这个应该是比较多人使用的，也是比较流行的。使用rem布局优点是可以适应多个屏幕，也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候，可能需要用到vh,或是百分比。
rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性，如果我们设置font-size是16px，那么1rem就是等于16px啦。
这里假设我们的设计稿是750px的（我现在做的一般都是750px）;我们需要用js动态的计算设备宽度对应的font-size的值，这里我设置320px的时候是16px,以此为基础（现在>一般最小的设备宽度就是320px），以下是具体的代码：
(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 = 16 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
那么在375px的宽度下，font-size就是375/32016 = 18.75;
如果设计稿上有个图片是200px200px，那么在375px的设备上图片的宽度应该换成多少rem呢，这里我们算一下，
设图片在375px的宽度是x,那么750/200 = 375/ x；x = 100; 图片宽度即为 100/18.75约为5.33rem,这个换算的过程我们可以交给sass，或是less去编译。这样我们就很方便的使用了。
下面是我常用的rem布局的sass代码
//基础font-size
$font:16;
//设计稿宽度
$screen:750;
@function px2rem($n){
@return #{$n/($screen*$font/320)}rem
}
//例如 设计稿宽度200px 那么可以写 width = px2rem(200);可以自动换算成rem;
如果文章有问题欢迎大家多多吐槽
参考文章：《设备像素比devicePixelRatio简单介绍》