主要介绍三种移动端布局方法：

• 1. 响应式布局，利用@meida判断各个size。
• 2. REM
• 3. 设置viewport中的width

一、响应式布局

• 这种感觉是最好理解了，利用@media进行断点，在每个断点中编写css。

  @media (max-width:768px){
  //css
  }

上面这段代码，在浏览器的宽度低于768时有效。同理，如果把max换成min，就会变成高于768时有效。可以设置宽度，也可以设置高度，也可以同时设置多个值。
在MDN,@media上，发现很多值都可以做判断的。宽，高，宽高比，颜色（这个是指定输出设备每个像素单位的比特值），是否横屏或竖屏，还有很多，可以去MDN看看。@meida还可以根据媒体类型进行断点。

• 看几个根据媒体类型进行的断点：

  @media (max-width:1000px){
      div{background:blue;}
  }
  @media (min-width:1000px) and (max-width:1150px){
      div{background: yellow;}
  }
  @media only screen and (max-width:1150px){
      div{border:solid 1px;}
  }
  @media not print and (max-width:1150px){
      div{border-radius:50%;}
  }
  

分别表示：
当浏览器宽度低于1000px时
当浏览器宽度大于1000px 和 小于1150px时
当在屏幕上显示 和 宽度小于1150px时
除了在打印上显示外 和 宽度小于1150px时

• @media还可以用在link标签上。

  <link rel="stylesheet" href="css/1.css" media="(max-width:500px)"/>
  

当浏览器宽度低于500px时，1.css的样式才会有效果。但这不代表大于500px时，就没加载了1.css。使用了@media属性后，只会让你当条件符合了，才让对应的css文件有效果。而且用这种方式有一个好处，就是不用在css里写@media。

二、REM

REM这个单位，会根据html的font-size大小进行转换。

html{font-size:100px;}
p{padding-top:.5rem;}

转换后p的padding-top就是50px了。只要我们进行适当的计算，当前屏幕的宽度，html的font-size是多少px就OK了。

• 如何计算当前html的font-size值
  比如，我们拿到的设计稿是750px，那就设置成当屏幕宽度是750的时候，html的font-size就是100px（当然这个100px你可以随意设置的，我设置成100px只是方便我计算），然后就根据当前屏幕的宽度 / 750 * 100，就得到了当前屏幕宽度的font-size值。

  (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 / 750) + 'px';
            };
  
       if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
  

• 淘宝移动端REM，引入一个flexible.js。是根据dpr去计算，而且会进行整体的缩放。

三、设置viewport中的width

就是定死viewport中的width大小，比如设计稿是750的，然后就在代码上写：

 <meta name="viewport" content="width=750"/>

我在iphone7，小米5s，谷歌浏览器模拟的iphone6plus上，字体颜色都是黄色的。所以@media媒体查询是无法使用的，因为已经将宽度定死了。而REM方案却可以使用媒体查询的。因为移动端有很多奇怪的大小，而且在不同的浏览器或者微信上，高度都是不同的，所以可能会造成间距有很大的问题。

对比总结：

• 响应式的优缺点

  • 优点：兼容性好，@media在ie9以上是支持的，PC和MOBILE是同一套代码的，不用分开。
  • 缺点：要写得css相对另外两个多很多，而且各个断点都要做好。css样式会稍微大点，更麻烦。

• REM优缺点

  • 优点：能维持能整体的布局效果，移动端兼容性好，不用写多个css代码，而且还可以利用@media进行优化。
  • 缺点：开头要引入一段js代码，单位都要改成rem(font-size可以用px)，计算rem比较麻烦(可以引用预处理器，但是增加了编译过程，相对麻烦了点)。pc和mobile要分开。

• 设置viewport中的width

  • 优点：和REM相同，而且不用写rem，直接使用px，更加快捷。
  • 缺点：效果可能没rem的好，图片可能会相对模糊，而且无法使用@media进行断点，不同size的手机上显示，高度间距可能会相差很大。

还是看项目需求，再决定使用哪种方案，如果就手机站的话，我使用REM比较多。如果对距离比较精确的话，大量css3动画的，就使用第三种。

参考总结个人使用过的移动端布局方法