移动端布局方法

1.响应式布局    利用@meta判断各个size

   利用@media进行断点，在每个断点上编写css。

  媒体类型：@meida还可以根据媒体类型进行断点。

• all，所有设备

• print，打印

• screen，彩色的电脑屏幕

• speech，不知道什么来的。

  @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%;}
  }

  按需‘加载’css  @media还可以用在link标签上

   2.REM

       rem这个单位，会根据HTML的font-size大小进行转换

      如何计算当前HTML的font-size值：      

//当前屏幕宽度/750=当前屏幕宽度的font-size/100
(function (doc,win){
   var docE1=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);

 3.设置viewport中的width

   定死viewpoint中的width大小。

对比三种方法：

   

响应式的优缺点

优点：兼容性好，@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的手机上显示，高度间距可能会相差很大