1. 课程简介：移动web适配利器rem

课程地址

https://www.imooc.com/video/16490

该文章通过慕课网教程《移动web开发适配秘籍Rem》编写而成，大体上的内容与课程一致。

移动端开发有如下的特点

跑在手机端的web页面（H5页面）；
跨平台；
基于webview；
告别IE拥抱webkit；
更高的适配和性能要求。

常见移动web适配方法

（1）PC端

960px/1000px居中；
盒子模型，定宽，定高；
display:inline-block。

（2）移动web

定高，宽度百分比；
flex；
Media Query(俗称媒体查询，和flex组合被称为响应式布局)。

Media Query详解

（1）基本语法
@media 媒体类型 and (媒体特性){
/css样式/
}
媒体类型：screen，print。。。
媒体特性：maxwidth，max-height，min-width，min-height。。。
（2）基本案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>MediaQuery</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100%;
        background-color: red;
      }
      .inner:nth-child(1) {
        background-color: red;
      }
      .inner:nth-child(2) {
        background-color: blue;
      }
      .inner:nth-child(3) {
        background-color: yellow;
      }
      .inner:nth-child(4) {
        background-color: green;
      }
      @media screen and (max-width: 320px) {
        .inner {
          height: 100px;
          width: 25%;
          float: left;
        }
      }
      @media screen and (min-width: 321px) {
        .inner {
          height: 100px;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>
</html>

rem原理与简介

（1）rem是一种字体单位，值根据html根元素大小而定，同样可以作为宽度，高度等单位；
（2）适配原理是将px替换成rem，动态修改html的font-size适配；
（3）兼容IOS6以上和Android2.1以上，基本覆盖所有流行的手机系统。
（4）rem原理代码分析

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>Rem</title>
    <style>
      html {
        font-size: 17px;
      }
      .box {
        height: 10rem;
        width: 10rem;
        background-color: red;
      }
      .text {
        color: #fff;
        font-size: 16px;
      }
      /*
       1rem = 17px = html的font-size(默认为16px)
       10rem = 170px
       * */
    </style>
  </head>
  <body>
    <div class="box">
      <p class="text">hello rem</p>
    </div>
  </body>
</html>

动态修改HTML中fontsize

方式一：使用media

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      div {
        height: 4rem;
        width: 100%;
        background-color: black;
        font-size: 1rem;
        color: white;
        text-align: center;
      }
      @media only screen and (min-width: 360px) and (max-width: 860px) {
        html {
          font-size: 300px;
        }
        div {
          color: red;
        }
      }
      @media only screen and (min-width: 860px) {
        html {
          font-size: 200px;
        }
        div {
          color: green;
        }
      }
    </style>
  </head>
  <body>
    <div>hello rem</div>
  </body>
</html>

方式二：采用JavaScript的方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      div {
        height: 4rem;
        width: 100%;
        background-color: black;
        font-size: 1rem;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>hello rem</div>
    <script>
      // 获取视窗的宽度
      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
      console.log(htmlWidth)
      // 获取视窗对象
      let htmlDom = document.getElementsByTagName('html')[0]
      console.log(htmlDom)
      // 设置html的font-size
      htmlDom.style.fontSize = htmlWidth / 10 + 'px'
    </script>
  </body>
</html>

rem进阶

（1）rem基准值的计算：1rem = html的font-size
（2）rem数值计算与构建：
（3）rem与scss结合使用：

@function px2rem($px) {
  $rem: 37.5px;
  @return ($px/$rem) + rem;
}
.demo {
  width: px2rem(75px);
  height: px2rem(37.5px);
}

// 编译后的结果
.demo {
  width: 2rem;
  heigth: 1rem;
}

（4）rem适配实战：采用rem高仿网易新闻H5版新闻列表页

步骤一：首先得安装好node和webpack，相关教程请上网自行百度，安装成功的结果是输入node -v、npm -v和webpack -v能够出现相应的版本号；
步骤二：命令行进入项目的目录，然后执行npm init，在项目中创建一个package.json文件；
步骤三：将课程中package.json文件里面中dependciess这部分代码copy进去；

"dependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2"
}

注意：由于我是全局安装webpack，因此在dependencies中少了一处配置。

步骤四：运行命令npm install
步骤五：创建一个webpack.config.js文件，并进行配置，参考配置
步骤六：跟着课程一点一点敲代码
最终课程效果

项目实战适配的原理分析

首先使用css预编译语言写好样式代码

@function px2rem($px) {
  // iphone6的宽度除以10
  $rem: 37.5px;
  @return ($px / $rem)+rem;
}

html {
  background-color: #f8f8f8;
}

.header {
  height: px2rem(40px);
  width: 100%;
  background-color: #6170b1;
  padding-left: px2rem(32px);
  box-sizing: border-box;
  .header-item {
    list-style-type: none;
    float: left;
    color: #D1DFB7;
    font-size: px2rem(16px);
    margin-right: px2rem(20px);
    line-height: px2rem(40px);
    &:nth-child(2) {
      color: #fff;
      font-size: px2rem(17px);
    }
  }
}

接着将该样式require进一个js文件中，动态更改html的font-size

require("./index.scss");
// 获得屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 获得html的dom
let htmlDOM = document.getElementsByTagName('html')[0];
// 设置html的fontsize
htmlDOM.style.fontSize = htmlWidth / 10 + 'px';