使用rem实现移动端适配的简单方法

使用rem适配已经快一年了，感受仍是不错的，在这里记录一下。 ##1.原理 rem是一个相对单位，相对的是根元素‘html’的字号。好比html的font-size:100px;那么1rem=100px；html的font-size:120px;那么1rem=120px；因此咱们能够根据手机不一样的尺寸，设置不一样的根元素字体，来适应不一样的屏幕。并且它兼容性好，从安卓2.1就支持rem。

举个栗子：

//在iPhone5下
html{
    font-size:100px;
}

//在iPhone6下
html{
    font-size:116px;
}

.box{
    width:1rem;//在iPhone5下，width为100px;在iPhone6下,width为116px，从而实现了大小屏的适配
}

##2.设置基准 咱们依据什么来设置根目录的字号呢？两种方案 ###2.1css媒体查询宽度设置断点 为何是宽度？由于垂直方向的能够出滚动条，而水平方向出现滚动条就有点怪怪的了。

@charset "utf-8";
//iphone5
@media screen and (max-width: 374px){
    html{
        font-size: 85px;
    }
}
//iphone6
@media screen and (min-width: 375px)and(max-width: 413px){
    html{
        font-size: 100px;
    }
}
//iphone6 p标准模式
@media screen and (min-width: 414px){
    html{
        font-size: 110px;
    }
}

###2.2js查询计算宽高变化比 这种方案是查询设备的宽高并计算出宽高的变化比（相对于你的基准尺寸），使用变化小的那个比值来设置根元素字号。

!function() {
   var count = 0;
   /*
      # 按照宽高比例设定html字体.
         - baseWidth和baseHeiht是设计稿尺寸
         - baseFontSize是720设计稿下html的fontsize
         - 按照当前屏幕宽高比跟设计稿宽高比较小的值做为缩放比例
   */
   function setHtmlFontSize(callback) {
      var baseWidth = 720, baseHeiht = 1280, baseFontSize = 22.5, newSize = 22.5,sacle = 1;

       //若是此时屏幕宽度不许确，就尝试再次获取分辨率，只尝试10次，不然使用innerWidth计算
      if(document.body.clientWidth !== window.innerWidth && count < 10) {
         document.body.style.display = "none";
         window.setTimeout(setHtmlFontSize, 0);
         count++;
      } 
      else {
          var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),
          newSize = parseInt( sacle * 10000 * baseFontSize ) / 10000;
          document.body.style.display = "none";
          setTimeout(function() {
            document.body.style.display = "";
            if(callback) {
              callback();
            }
            document.documentElement.style.fontSize = newSize + "px";
         }, 0);
      }
   }
   setHtmlFontSize();
}();

我目前采用的就是css方案，为何放弃了js这种看起来更人性化的方案，是由于在测试的时候发现，有些低版本手机的某些浏览器下面会出现bug，它会先渲染一个没有计算过页面，而后再渲染成对的尺寸。反之css效率则很高。并且安卓尺寸千千万万，就不宠你，不宠你。实际上是它们坑死咱们~~

##3.小技巧 ###1.100px 我在写代码时并无用px转rem插件，由于并不须要。技巧在于咱们以1rem=100px为基准，这样在写代码的时候，咱们只须要将px的值移动两位小数就行了，这应该不用计算器把。。阿门 ###2.以小为标准 这里主要是指咱们在用css媒体查询时，两个端点之间的尺寸使用小屏幕的基准。好比位于iPhone6和iPhone5之间的尺寸，使用iPhone5的基准。由于小屏幕的东西放大屏幕确定空间是够的，可是反之则不必定。由于有时候会写一些笨笨的代码。。。举个例子： 笨的写法就是按照宽度写罗，分别指定三个元素的宽度罗。哈哈，我仍是比较喜欢flex。

##4.k e n g坑 以前带给个人烦恼就是雪碧图使用起来就不爽了，不过如今咱们把中小图标所有使用图标字体替换了，也就ok了。雪碧图使用有哪些不爽呢？

• 图片之间的留白要尽可能大一点，要否则就会露出旁边的图片
• 不一样尺寸手机下会出现图片位置稍稍的错位，对于小图标而言，就很是明显了。 不使用雪碧图也有一个坑：

.box{
    width:1rem;
    height:1rem;
    background-size:100% 100%;//对滴
    background-size:1rem 1rem;//不对滴
}

background-size请使用100%,100%,而不是1rem,1rem,这种，由于在浏览器渲染时，咱们的rem转化成px以后，是会有不少小数位的，浏览器对width、height的精确度和background-size的精确度是不同的，非雪碧图，咱们通常死不留白的，就会致使有一点点错位。

##5.字号须要使用rem吗 html的字号是用来布局用的，这里的字号是指整个页面的文字字号，设置在body中，其余元素继承。

我是不同意在大屏手机下字号要变大的，会给人一种老人机的感受。并且其余app还有网页都是使用的正常字号，你恰恰要给加大几个号，很差。

若是，若是，若是你硬是要加大，我教你一个简单方法，你千万别去一个个的改。使用sass中的变量，这样你就只要在媒体查询中修改一个变量的值，而不用每一个元素每一个元素去改了。后面我会写一个文章介绍sass的这个用处，这里不宜再发散了。我怕我止不住。

##6.结合em em：和rem同样，它是一个相对单位，可是它相对的是自身字号。

为何须要结合em呢？

之前咱们以640为基准时是没有必要使用这个单位，可是如今咱们是以750为基准，咱们就须要这个单位了。看看下面的例子，你就明白了。

表单的label’单位电话‘，若是在750下，它为1rem(这个值是随便指定的)，它恰好能够容纳四个字，且两边有稍许留白。在咱们切到640的时候，它的宽度变小了，可是咱们的字号没有变化，就会出现不够容纳四个字的状况。所以咱们这里使用em加rem定义：

.label-tel{
    width:4em;
    padding:0 0.05rem;
}