移动web开发适配rem

• 移动web开发与适配
  常见移动web适配方法：
  PC：

• 960px / 1000px居中

• 盒子模型，定高，定宽

• display:inline-block

  移动web：

• 定高，宽度百分比

• flex
• Media Query(媒体查询)
• -

---

• rem原理与简介
  字体单位 - 值根据html根元素大小而定，同样可以作为宽度，高度等单位
  适配原理 - 将px替换成rem，动态修改html的font-size适配
  兼容性 - IOS 6以上和android 2.1以上，基本覆盖所有流行的手机系统

---

• 采用rem适配页面实战
  rem进阶基础知识
  1.rem基准值的计算

  2.rem数值计算与构建
  3.rem与scss结合使用
  首先安装node-sass，在终端输入命令

npm install  node-sass  -g

编译sass为css，可在终端输入命令

node-sass a.scss b.css

a.scss

@function px2rem($px){
    $rem:37.5px;      //  1rem = 37.5px
    @return ($px / $rem) + rem;         //  返回rem
}

.hello{
    width:px2rem(100px);
    height: px2rem(100px);
    &.b{
        width: px2rem(50px);
        height: px2rem(50px);
    }
}

b.css

.hello {
  width: 2.66667rem;
  height: 2.66667rem; }
  .hello.b {
    width: 1.33333rem;
    height: 1.33333rem; }