移动端页面的适配

一、关于viewport设置

<meta id="device" name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">

二、关于不同设备rem大小的计算，以及动态设置像素缩放比

function setSize() {
    var pixelRatio = 1 / window.devicePixelRatio;
    $("#device").attr("content", "width=device-width,initial-scale=" + pixelRatio + ",maximum-scale=" + pixelRatio + "");
    var html = document.getElementsByTagName("html")[0];
    var pageWidth = html.getBoundingClientRect().width;
    html.style.fontSize = pageWidth / 10 + "px";
}

三、koala将less转义为css的运用
设计稿宽度为：750px,与iphone6为整倍数关系，故选iphone6为调试设备。(选择调试设备时，最好选择与设计稿宽度成整倍数的设备）

setSize（）中，html.style.fontSize=pageWidth/10+”px”,故设置less文件=》 @rem:设计稿宽度/10 rem=>@rem:75rem

@rem: 75rem; //公共样式

在写less样式时，尺寸: 按照psd图片尺寸大小/@rem 即可。例如：

.header {
    position: absolute;
    width: 100%;
    height: 88/@rem;
    background-color: #3399ea;
    padding: 24/@rem 20/@rem 24/@rem 16/@rem;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 100;
    .house {
        display: block;
        width: 40/@rem;
        height: 40/@rem;
        background: url("../img/house.png") no-repeat center center;
        background-size: 40/@rem 40/@rem;
        float: left;
    }
    .logo {
        float: left;
        display: block;
        width: 180/@rem;
        height: 40/@rem;
        margin-left: 225/@rem;
        margin-right: 120/@rem;
        background: url("../img/logo.png") no-repeat;
        background-size: 180/@rem 40/@rem;
    }
    .tel {
        float: right;
        width: 140/@rem;
        height: 40/@rem;
        font-size: 20/@rem;
        color: #ffffff;
    }
}

附上经过koala转义过来的css对应代码

.header {
  position: absolute;
  width: 100%;
  height: 1.17333333rem;
  background-color: #3399ea;
  padding: 0.32rem 0.26666667rem 0.32rem 0.21333333rem;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 100;
}
.header .house {
  display: block;
  width: 0.53333333rem;
  height: 0.53333333rem;
  background: url("../img/house.png") no-repeat center center;
  background-size: 0.53333333rem 0.53333333rem;
  float: left;
}
.header .logo {
  float: left;
  display: block;
  width: 2.4rem;
  height: 0.53333333rem;
  margin-left: 3rem;
  margin-right: 1.6rem;
  background: url("../img/logo.png") no-repeat;
  background-size: 2.4rem 0.53333333rem;
}
.header .tel {
  float: right;
  width: 1.86666667rem;
  height: 0.53333333rem;
  font-size: 0.26666667rem;
  color: #ffffff;
}

至于其他设备的适配问题，rem早已解决啦。

关于koala的用法，可自行百度哦。