第一章：前言

1.1 京东的移动端适配

尺寸为 414 * 896 时的移动端：

尺寸为 375 * 667 的移动端适配：

总结：移动端适配不仅要宽度适配，同时高度也需要适配。

1.2 移动端适配解决方案

rem。
vw / vh 。

第二章：rem

2.1 概述

rem 可以实现屏幕 宽度不同 ，网页元素尺寸不同（等比缩放）。
px 单位或百分比布局不能实现屏幕宽度不同，网页元素尺寸等比缩放：
- px 单位是绝对单位。
- 百分比布局的特点是宽度自适应，但是高度是固定的。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <script src="./js/flexible.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.2 rem 的基本使用

rem 单位：
- 相对单位。
- rem 单位是相对于 HTML 标签的字号（font-size）计算出来的结果。
- 1 rem = 1 html 的 font-size 。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 1 rem = 1 html 标签字号大小 */
        html {
            font-size: 20px;
        }

        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.3 媒体查询

『问』：手机屏幕大小不同，分辨率不同，如何设置不同的 HTML 标签的字号？
『答』：使用 媒体查询 设置 差异化 的 CSS 样式。
媒体查询 能够检测视口的宽度，然后编写 差异化 的CSS 样式，当某个条件成立的时候，就调用对应的 CSS 样式。
媒体查询的语法：

@media (媒体特性){
    选择器 {
        /* CSS 样式; */
    }
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 使用媒体查询，根据不同的视口宽度，设置不同的根字号。 */
        @media (width: 375px) {
            html {
                font-size: 40px;
            }
        }

        @media (width: 320px) {
            html {
                font-size: 30px;
            }
        }

        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

『问』：设备宽度不同，HTML 标签字号设置多少合适？
『答』：在 rem 布局方案中，将网页等分为 10 份，HTML 标签的字号就是 视口宽度 的 1/10 。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 使用媒体查询，根据不同的视口宽度，设置不同的根字号。 */
        /* 视口宽度为 375px,根字号的就是 37.5px */
        @media (width: 375px) {
            html {
                font-size: 37.5px;
            }
        }

        /* 视口宽度为 320px,根字号的就是 32px */
        @media (width: 320px) {
            html {
                font-size: 32px;
            }
        }

        /* 视口宽度为 414px,根字号的就是 41.4px */
        @media (width: 414px) {
            html {
                font-size: 41.4px;
            }
        }

        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.4 rem 布局流程

在工作中，书写代码的尺寸需要参照设计稿的尺寸，设计稿中的是 px 单位，那么如何确定 rem 的数值？

rem 布局流程：
- ① 根据视口宽度，设置不同的 HTML 标签字号。
- ② 书写代码，尺寸是 rem 单位。
  - 确定设计稿中 对应 的设置的 HTML 标签字号：查看 设计稿宽度 —> 确定参考 设备宽度（视口宽度） —> 确定 基准根字号（1/10 视口宽度）。
  - rem 单位尺寸计算：N * 37.5 = 68 —> N = 68 / 37.5 ，即 rem 单位的尺寸 = px 单位数值 / 基准根字号 。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 使用媒体查询，根据不同的视口宽度，设置不同的根字号。 */
        /* 视口宽度为 375px,根字号的就是 37.5px */
        @media (width: 375px) {
            html {
                font-size: 37.5px;
            }
        }

        /* 视口宽度为 320px,根字号的就是 32px */
        @media (width: 320px) {
            html {
                font-size: 32px;
            }
        }

        /* 视口宽度为 414px,根字号的就是 41.4px */
        @media (width: 414px) {
            html {
                font-size: 41.4px;
            }
        }

        .box {
            /* 68 / 37.5 */
            width: 1.81rem;
            /* 29 / 37.5 */
            height: 0.77rem;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.5 rem-flexible 移动适配

flexible.js 是手机淘宝开发出来的一个用来适配移动端的 js 框架。
核心原理就是根据 不同的视口宽度 给网页中的 html 根节点设置不同的 font-size 。
flexible.js 的源码如下：

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 68 / 37.5 */
            width: 1.81rem;
            /* 29 / 37.5 */
            height: 0.77rem;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="box"></div>

    <script src="./js/flexible.js"></script>
</body>
</html>

第三章：less

3.1 概述

在 px 单位转为 rem 单位的过程中，除法运算特别麻烦，因为 CSS 不支持计算写法。
在实际开发中，可以通过 Less 等 CSS 预处理器来解决这类问题。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <link href="./less/07.less" rel="stylesheet/less" type="text/css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>
    <script>less.watch();</script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script src="./js/flexible.js"></script>
</body>
</html>

.father {
  color: red;
  width: (68 / 37.5rem);
  height: (29 / 37.5rem);

  .son {
    background-color: pink;
  }
}

3.2 less 简介

less 是一个 CSS 预处理器，Less 的文件后缀名是 .less 。
less 扩充了 CSS 语言，使得 CSS 具备一定的逻辑性、计算能力。

注意：目前浏览器不识别 Less 代码，可以使用工具编译 Less 代码。

3.3 less 注释

单行注释：

// 注释内容

快捷键：ctrl + /

多行注释：

/* 注释内容 */

快捷键：ctrl + shift + /

3.4 less 运算

加、减、乘直接书写计算表达式。
除法 需要添加 小括号 或 . 。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <link href="./less/08.less" rel="stylesheet/less" type="text/css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>
    <script>less.watch();</script>
</head>
<body>
    <div class="box"></div>
</body>
</html>

.box {
  width: 100 + 50px;
  height: 5 * 32px;

  width: (100 / 4px);
  width: 100 ./ 4px;
}

3.5 less 嵌套

less 嵌套可以快速生成后代选择器。
语法：

.父级选择器 {
    // 父级样式
    .子级选择器{
        // 子级样式
    }
}

注意：& 不生成后代选择器，表示当前选择器，通常配合 伪类 或 伪元素 使用。

.父级选择器 {
    // 父级样式
    &:hover {
        // 伪类或伪元素样式
    }
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <link href="./less/09.less" rel="stylesheet/less" type="text/css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>
    <script>less.watch();</script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

.father {
  width: 200px;
  height: 200px;
  background-color: red;

  .son {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
}

3.6 less 变量

『问』：网页中，文字颜色基本上是统一的，如果网站改版，变换文字颜色，如何修改代码？
『答』：使用 less 的变量。
语法：

// 定义变量
@变量名: 值;
// 使用变量
css 属性: @变量名;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="./less/10.less" rel="stylesheet/less" type="text/css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>
    <script>less.watch();</script>
</head>
<body>
    <div class="box"></div>
</body>
</html>

@pink: pink;

.box {
  width: 200px;
  height: 200px;
  background-color: @pink;
}

3.7 less 导入

『问』：开发网站的时候，网页如何引入公共样式？
『答』：
- CSS：书写 link 标签。
- Less：导入。

语法：

@import '文件路径';

示例：
base.less

* {
  margin: 0;
  padding: 0;
}

index.less

@import './base.less';

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="./less/index.less" rel="stylesheet/less" type="text/css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>
    <script>less.watch();</script>
</head>
<body>
    <div class="box"></div>
</body>
</html>

第四章：vw/vh

4.1 概述

vw（viewport width）和 vh （viewport height）是相对单位，相对 视口的尺寸 计算结果的。
1 vw = 1/100 视口宽度。
1 vh = 1/100 视口高度。

其实，vw 和 vh 就是将以前的 flexible.js 的功能进行浏览器标准化了。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 1 vw = 1/100 视口宽度  */
            width: 50vw;
            height: 30vw;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

4.2 vw 适配原理

vw 单位尺寸计算：
- ① 确定设计稿中 对应 的 vm 尺寸（1/100 视口宽度）：
  - 查看 设计稿宽度 —> 确定 参考设备宽度（视口宽度） —> 确定 vw 尺寸（1/100 视口宽度）
- ② vw 单位的尺寸 = px 单位数值 / （1/100 视口宽度）

vh 的适配原理和 vw 类似。

4.3 vw 和 vh 混用？

『问』：开发中，vw 和 vh 会不会混用？
『答』：不会，vh 是 1/100 视口高度，全面屏视口高度尺寸大，如果混用会导致盒子变形。