rem自适应手机端与PC端总结（less版本）

1、首先rem是根据祖元素font-size大小倍数的单位，一般设置html元素的font-size大小；
2、rem自适应原理就是根据监听屏幕宽度，对应改变祖元素font-size的大小，从而改变页面上使用rem单位元素的大小而做到的；

html{font-size:20px}   //祖元素

div{width:2rem}  //此时`div`宽度为40px;

进入正题

一般UI设计师给出的UI图为px单位（或其他绝对单位），UI图是根据一定屏幕尺寸做出来的; 也就是说，UI图上一个200px的div是在1920屏幕上显示的尺寸；如果在1440的笔记本上则div应该自适应的缩小；这也是我们要做的事；

监听屏幕宽度一是通过css媒体查询，二是注册onresize方法；

css版本 PC端

    @media screen and (width: 1920px) {
      html { font-size: 100px;min-width: 100%;}
    }
    @media screen and (min-width: 1024px) {
      html {font-size: 53.33333333px !important; }
    }
    @media screen and (min-width: 1366px) {
      html {font-size: 71.14583333px !important;}
    }
    @media screen and (min-width: 1280px) {
      html { font-size: 66.66666667px !important;}
   }
    @media screen and (min-width: 1440px) {
      html {  font-size: 75px !important;}
     }
    @media screen and (min-width: 1600px) {
     html { font-size: 83.33333333px !important}
    }
    @media screen and (min-width: 1920px) {
      html {font-size: 100px !important;}
    }

less版本pc端

编译过后与css版本一样,但更灵活，自动计算，适用手机与PC;

    html{
      @firstViewportWidth: 1920px;     //默认UI设计尺寸
      @defaultFontSize: 100px;          //默认初始fontsize大小
      @media screen and (width: @firstViewportWidth){  //绑定到没听查询
        font-size: @defaultFontSize;
        min-width: 100%;
      };

   //根据传入的屏幕尺寸@viewportWidth计算出与初始@firstViewportWidth的比
     例，然后将默认的fontsize> @defaultFontSize对应的放大缩小
     .media(@viewportWidth,@firstViewportWidth:1920px){
        @media screen and (min-width: @viewportWidth) {
        font-size: @defaultFontSize / (@firstViewportWidth /   
    @viewportWidth)!important;
    }
      };
      .media(1024px);     //所要设配的屏幕尺寸
      .media(1366px);
      .media(1280px);
      .media(1440px);
      .media(1600px);
      .media(1920px);
    }
    @media screen and (max-width: 1440px) {
      html {
        font-size: 75px !important;
      }
    }

手机端把传入的设配尺寸改了就行；

需要注意的坑

1、由于谷歌浏览器支持的最小font-size大小为12px;所以编译过后的最小font-size大小不应该小于12px；（手机端需注意）；
2、PC端初始大小不宜过小，手机端不宜太大，不能为了好计算都设为100px；
最后附上rem转px工具 (http://520ued.com/tools/rem?utm_source=caibaojian.com)

over