# 二、移动 web 开发流式布局

# 1.移动端基础

# 1.1 浏览器现状

pc 端浏览器，移动端浏览器 webkit 内核进行兼容

# 1.2 手机屏幕现状--碎片化严重

# 1.3 移动端调试方法

(opens new window)

# 2.视口（viewport）

浏览器显示页面内容的屏幕区域

# 2.1 布局视口 layoutviewport

(opens new window)

# 2.2 视觉视口 visual viewport ---用户正在看到的网站的区域

# 2.3 理想视口 ideal viewport

(opens new window)

# 2.4meta 视口标签

(opens new window)

# 2.5 标准的 viewport 设置

(opens new window)

# 2.6 二倍图

# 2.6.1 物理像素（分辨率）/物理像素比（1px 能显示的物理像素的个数）

物理像素点越多，越清晰

# 2.6.2 二倍图做法

(opens new window)

# 2.6.3 背景缩放 background-size

background-size 规定了背景图像的尺寸

background-size：背景图像的宽度 背景图像的高度

1.只写一个参数，肯定是宽度，高度会等比例缩放

2.里面的单位可以跟百分比，相对于父盒子来说的

3.cover：把整个盒子完全盖住，可能有部分背景图片显示不全

4.contain：高度和宽度等比例拉伸，当宽度或者高度铺满 div 盒子时，不再进行拉伸，可能有部分空白区域

(opens new window)

注意：多倍图切图：用 ps 中的 cutterman

# 2.7 移动端开发选择

# 2.7.1 移动端主流方案

# 1.单独制作移动端页面（主流）京东商城手机版....

通过设备的不同，打开不同的页面，页面是单独的

# 2.响应式页面兼容移动端（其次）三星手机官网

兼容手机端和移动端（要考虑兼容性问题）

# 2.8 移动端技术解决方案

# 2.8.1 移动端浏览器

# 2.8.2 CSS 初始化 normalize.css

(opens new window)

# 2.8.3 CSS3 盒子模型 box-sizing

padding 和 border 不会再增大盒子

# 2.8.4 特殊样式

(opens new window)

# 2.9 移动端常见布局

# 2.9.1 移动端技术选型

(opens new window)

# 3.0 流式布局（百分比布局）---常见的布局方式

通过盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制。


max-width 最大宽度 max-height 最大高度

min-width 最小宽度 min-height 最小高度

# 案例：京东移动端首页

# 重点：二倍精灵图的做法

(opens new window)

# 图片格式：

(opens new window)

# 3.1 flex 弹性布局（最好用，最方便的布局方式）

1. **如果是 PC 端页面，推荐传统布局**
2. **如果是移动端或 PC 端不考虑兼容性，推荐 flex 布局**

# 3.1.1 flex 布局原理

就是：通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式

flex：flexible box 的缩写，任何一个容器都可以用 flex 布局

当我们为父元素设为 flex 布局后，子元素的 float，clear，vertical-algin 属性将失效

# 3.1.2 flex 布局父项常见属性

flex-direction：设置主轴的方向
justify-content：设置主轴上子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置测轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

1.flex-direction：设置主轴的方向

默认的主轴是 x 轴 行 row 那么 y 轴就是侧轴

我们的元素是跟着主轴来排列的

我们可以设置我们的主轴为 y 轴，那么 x 轴就成了侧轴

2.justify-content：设置主轴上子元素排列方式

注意：使用这个属性之前一定要确定好主轴是哪一个

justify-content：flex-start （默认）左边对齐
justify-content：flex-end 右边对齐
justify-content：center 居中对齐
justify-content：space-around 平均分配剩余空间
justify-content：space-between 先两边贴边，再分配剩余的空间（重要）

3.flex-wrap：设置子元素是否换行

默认不换行，如果装不开，会缩小子元素的宽度。

flex-wrap：nowrap 不换行 wrap 换行

4.align-items：设置侧轴上的子元素排列方式（单行）

align-items：center 侧轴居中对齐

align-first-start 上沿对齐

align-items：center 下沿对齐

align-items：strength 拉伸（了解）

4.align-content：设置侧轴上的子元素的排列方式（多行）子元素出现换行效果，在单行下没有效果

(opens new window)

5.flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap (opens new window)

# 3.2 flex 布局子项常见属性

# 3.2.1 flex 属性，从剩余空间中分配，表示占多数份数。

flex：number （默认 0）

# 3.2.2 align-self 控制子项自己在侧轴的排列方式（了解）

(opens new window)

# 3.2.3 order（了解）定义子项的排列顺序默认为 0

(opens new window)

# 3.3 背景线性渐变必须添加浏览器私有前缀

(opens new window)

# 3.4 移动 WEB 开发之 rem 适配布局（非常流行）

# 3.4.1 rem 单位

rem 是一个相对单位，类似于 em
em：相对于父元素字体大小
rem 的基准是相对于 html 元素的字体大小
优点：可以通过修改 html 中文字的大小来改变页面中元素的大小可以整体控制

# 3.4.2 媒体查询（Media Query）---CSS3 新语法

@media---可以针对不同的的屏幕尺寸设置不同的样式

语法规范：

(opens new window)

# 3.4.3 mediaType 查询类型

根据不同的终端设备划分成不同的类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

# 3.4.4 关键字

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

and：可以将多个媒体特性连接到一起
not：排除某个媒体类型，可以省略
only：执行某个特定的媒体类型，可以省略

# 3.4.5 媒体特性

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

/*这句话的意思是在我们的屏幕上，并且最大宽度是  800像素，设置我们想要的样式，*/
/*    max-width：意思是小于等于800*/
/*媒体查询可以根据不同的屏幕尺寸改变不同的样式*/
@media screen and (max-width: 800px) {
  body {
    background-color: pink;
  }
}
@media screen and (max-width: 500px) {
  body {
    background-color: purple;
  }
}

# 3.5 媒体查询+rem 实现元素动态大小变化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <style>
    @media screen and (min-width: 320px) {
      html {
        font-size: 50px;
      }
    }
    @media screen and (min-width: 640px) {
      html {
        font-size: 100px;
      }
    }
    .top {
      height: 1rem;
      font-size: 0.5rem;
      background-color: green;
      color: #ffffff;
      text-align: center;
      line-height: 1rem;
    }
  </style>
  <body>
    <div class="top">购物车</div>
  </body>
</html>

# 3.6 引入资源

针对不同的媒体引入不同的 css 文件

(opens new window)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    //媒体查询最好的方式是从小到大书写
    <link rel="stylesheet" media="screen and (max-width:640px)" href="style320.css" />
    <link rel="stylesheet" media="screen and (min-width:640px)" href="style640.css" />
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

# 3.7 less 基础

# 3.7.1 CSS 的弊端

(opens new window)

# 3.7.2 less---CSS 的扩展语言，CSS 的预处理器新的语言

(opens new window)

less 的使用：

less 变量
less 编译
less 嵌套
less 运算

# 3.7.3 less 变量

@变量名：值；

变量命名规范：
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

//定义一个颜色为粉色的变量
@color: pink;
//定义字号为14的变量   命令规范与java一样，大小写敏感
@font14: 14;
body {
  background-color: @color;
}
div {
  background-color: @color;
}
span {
  font-size: @font14;
}

# 3.7.4 less 编译 easy-less 插件（vsdcode）

需要把 less 文件转换为 css 文件

# 3.7.5 less 嵌套

// 1. less 嵌套，子元素的样式直接写到父元素里面

a {

background-color: purple;

//2. 如果有伪类，伪元素，交集选择器，我们内层选择器需要加&

&:hover {

background-color: aquamarine;

}

# 3.7.6 less 运算

@border: 5px;

div {
width: 100px-50;
width: (@border+5)\*2;
height: 100px\*2;
border: @border solid red
}
img {
width: 80/15rem;
height: 80/15rem;
}

注意：

乘号：* 除号：/
运算符左右两边必须敲一个空格隔开
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
两个数参与运算，如果两个数都有单位，而且不一样的单位，最后的结果以第一个单位为准

# 3.8 rem 适配方案 ---通过 rem 适配不同的屏幕

# 3.8.1 rem 适配方案技术使用

技术方案 1：less+媒体查询+rem

技术方案 2：flexible.js+rem（更简单，更推荐）

# 3.9 rem 实际开发适配方案 1 less+媒体查询+rem

# 3.9.1 设计稿常见尺寸宽度---现在基本以 750 为准

设备	常见宽度
iPhone 4 5	640px
iphone 6 7 8	750px
Android	常见 320px,360px,375px,大部分 4.7~5 寸的安卓设备为 720px

# 3.9.2 动态设置 html 标签 font-size 大小

(opens new window)

# 3.9.3 元素取值方法

最后的公式：页面元素的 rem 值=页面元素值（px）/（屏幕宽度/划分的份数（15/20 都行））
屏幕宽度/划分的份数就是 html font-size 的大小
或者：页面元素的 rem 值=页面元素值（px）/html font-size 字体大小

# 案例：苏宁首页制作

rem 实际开发适配方案 1 less+媒体查询+rem
设计稿：750px
导入初始化项目的 normalize.css 文件
设置公共 common.less 文件

4.1 新建 common.js 设置好最常见的屏幕尺寸，里面媒体查询设置不同的 html 字体大小，因为除了首页其他页面也需要

4.2 我们关心的尺寸有 320px，360px，375px，384px，400px，414px，424px，480px，540px，720px，750px

4.3 划分的份数定为 15 等份

4.4 因为我们 pc 端也可以打开苏宁移动端首页，我们默认 html 字体大小为 50px，注意这句话写到最上面

5.新建 index.less 文件

将 common.less 文件引入到 index.less 文件中

@import 可以把一个样式文件导入到另一个样式文件中 @import “common”

link：是把一个样式文件引入到一个 html 文件中

# 4.0 简洁高效的 rem 适配方案 flexible.js

(opens new window)

# 4.1flexible.js+rem（更简单，更推荐）

# 4.2 VScode px 转 rem 插件 cssrem

/* 如果我们的屏幕超过了 46.875rem 那么我们就按照 750 设计稿来走不会让我们页面超过 46.875rem */

@media screen and (min-width: 46.875rem) {

html {

 font-size: 4.6875rem !important;

}

}

# 移动端完整项目开发（详细见黑马面面文档）

# 1.1 蓝湖/募客写作平台

ui 设计师 psd 效果图完成后，会上传到蓝湖/募客，同时拉前端工程师进入开发

募客官网，注册账号，点击安装 ps 插件，

# 4.3 移动 web 开发之响应式布局

# 4.3.1 响应式开发原理

通过媒体查询针对不同的宽度的设备进行布局和样式的设置，从而达到不同的设备的目的

设备划分	尺寸区间
超小屏幕（手机）	<768px
小屏设备（平板）	>=768px~<992px
中等屏幕（桌面显示器）	>=992px--<1200px
宽屏设备（大桌面显示器）	>=1200px

# 4.3.2 响应式布局容器

响应式需要一个父级作为布局容器，来配合子元素来实现变化效果

原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同页面的布局变化

平时我们的响应式尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为：100%

小屏幕（平板，大于等于 768px）：设置宽度为：750px

中等屏幕（桌面显示器，大于等于 992px）：设置宽度为：970px

大屏幕（大桌面显示器，大于等于 1200px）：设置宽度为：1170px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        height: 150px;
        background-color: pink;
        margin: 0 auto;
      }
      /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */

      @media screen and (max-width: 767px) {
        .container {
          width: 100%;
        }
      }
      /* 2. 小屏幕下  大于等于768  布局容器改为 750px */

      @media screen and (min-width: 768px) {
        .container {
          width: 750px;
        }
      }
      /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */

      @media screen and (min-width: 992px) {
        .container {
          width: 970px;
        }
      }
      /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */

      @media screen and (min-width: 1200px) {
        .container {
          width: 1170px;
        }
      }
    </style>
  </head>

  <body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
  </body>
</html>

# 案例：响应式导航栏

(opens new window)

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container {
      width: 750px;
      margin: 0 auto;
    }
    .container ul li {
      float: left;
      height: 30px;
      width: 93.75px;
      background-color: green;
      color: #fff;
      text-align: center;
    }
    @media screen and (max-width: 767px) {
      .container {
        width: 100%;
      }
      .container ul li {
        width: 33.33%;
      }
    }
  </style>
  <body>
    <div class="container">
      <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
        <li>导航7</li>
        <li>导航8</li>
      </ul>
    </div>
  </body>
</html>

# 4.4 Bootstrap 前端开发框架

(opens new window)

# 4.4.1 Bootstrap 基本使用

创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容

（1）创建文件夹结构

（2）创建 html 骨架结构

(opens new window)

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，Bootstrap 预先定义好了这个类，叫.container

# 1.container 类

超小屏幕（手机，小于 768px）：设置宽度为：100%
小屏幕（平板，大于等于 768px）：设置宽度为：750px
中等屏幕（桌面显示器，大于等于 992px）：设置宽度为：970px
大屏幕（大桌面显示器，大于等于 1200px）：设置宽度为：1170px

# 2.container-fluid 类

流式布局容器百分百宽度
占据全部视口（viewport）的容器
适合于单独做移动端开发

# 4.5 Bootstrap 的栅格系统

----将页面布局容器划分为等宽的列。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

# 4.5.1 栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12

行（row）必须放到 container 布局容器里面
我们实现列的平均划分需要给列添加类前缀
xs：extra small 超小 sm：small 小 md：medium 中等 la：large 大
列（column）大于 12，多余的列（column）所在的元素将被作为一个整体另起一行排列
每一列默认有左右 15 像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同的份数例如：class=”col-md-4 col-sm-6“

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      [class^='col'] {
        border: 1px solid #ccc;
      }

      .row:nth-child(1) {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
      </div>
      <!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 -->
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
      </div>
      <!-- 如果孩子的份数相加 小于 12 则会？ 则占不满整个container 的宽度 会有空白 -->
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
      </div>
      <!-- 如果孩子的份数相加 大于 12 则会？多于的那一列会 另起一行显示  -->

      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
      </div>
    </div>
  </body>
</html>

# 4.5.2 列嵌套

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <!--            我们列嵌套最好加1个行row  这样可以取消父元素的padding值而且高度自动和父级一样高-->
        <div class="col-md-6">a</div>
        <div class="col-md-6">b</div>
      </div>
    </div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
  </div>
</div>

# 4.5.3 列偏移 col-md-offset-* 实际是给对应的盒子加一个外边距

<div class="container">
  <div class="row">
    <div class="col-md-4">左侧</div>
    <!--    偏移的份数就是：12-两个盒子的份数-->
    <div class="col-md-4 col-md-offset-4">右侧</div>
  </div>
  <div class="row">
    如果只有一个盒子，那么就偏移=（12-8）/2
    <div class="col-md-8 col-md-offset-2">中间</div>
  </div>
</div>

# 4.5.4 列排序 col-md-push-_ col-md-pull-_ 改变列的顺序

<div class="row">
  <div class="col-md-4 col-md-push-8">左侧</div>
  <div class="col-md-8 col-md-pull-4">右侧</div>
</div>

# 4.5.5 响应式工具

利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，是 visible-xs visible-sm visible-md visible-lg 是显示某个页面内容

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
  </head>
  <style>
    .row > div {
      height: 50px;
    }
    div:nth-child(1) {
      background-color: blue;
    }
    div:nth-child(2) {
      background-color: yellow;
    }
    div:nth-child(3) {
      background-color: green;
    }
    div:nth-child(4) {
      background-color: pink;
    }
    span {
      width: 50px;
      height: 50px;
      color: #ffffff;
      font-size: 28px;
    }
  </style>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <span class="visible-md">我会变魔术</span>
        </div>
        <div class="col-md-3">2</div>
        <div class="col-md-3 hidden-sm hidden-xs">注意看我变化</div>
        <div class="col-md-3">4</div>
      </div>
    </div>
  </body>
</html>

# 案例：阿里百秀首页

技术选型：

方案：我们采取响应式页面开发

技术：bootstrap 框架

设计图：本设计图采用 1280px 设计尺寸

(opens new window)

# 4.6 vw 和 vh

vw/vh 是一个相对单位（类似于 em/rem）

vw：viewport width 视口宽度单位

vh：viewport height 视口高度单位

相对视口的尺寸计算结果：

1vw=1/100 视口宽度

1vh=1/100 视口高度

(opens new window)

和百分比的区别：百分比是相对于父元素来说的，而 vw，vh 是相对于当前视口来说的

# 4.7 vw 怎么使用

元素单位直接使用新单位 vw/vh 即可。
因为 vw/vh 是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配。

<style>
  div {
    width: 10vw;
    height: 10vh;
    background-color: pink;
  }
</style>
<body>
  <div></div>
</body>

# 4.8 vw/vh 如何还原设计稿

(opens new window)

# 4.9vw 注意事项

开发中使用 vw，需要像素大厨有哪些改动？

把模式改为 2x 模式

开发中使用 vw，如何还原设计稿？

确定设计稿视口宽度。比如 375

直接使用测量数值 / （视口宽度 / 100）

比如：50/（375/100）

因为涉及到大量除法，还是适合 LESS 搭配更好点

我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用 vw 就基本够用了。vh 很少使用。

兼容性：网站：https://caniuse.com/

# 5.0 如何下载 b 站字体图标

(opens new window)

← css基础

# 二、移动 web 开发流式布局

# 1.移动端基础

# 1.1 浏览器现状

# 1.2 手机屏幕现状--碎片化严重

# 1.3 移动端调试方法

# 2.视口（viewport）

# 2.1 布局视口 layoutviewport

# 2.2 视觉视口 visual viewport ---用户正在看到的网站的区域

# 2.3 理想视口 ideal viewport

# 2.4meta 视口标签

# 2.5 标准的 viewport 设置

# 2.6 二倍图

# 2.6.1 物理像素（分辨率）/物理像素比（1px 能显示的物理像素的个数）

# 2.6.2 二倍图做法

# 2.6.3 背景缩放 background-size

# 2.7 移动端开发选择

# 2.7.1 移动端主流方案

# 1.单独制作移动端页面（主流） 京东商城手机版....

# 2.响应式页面兼容移动端（其次）三星手机官网

# 2.8 移动端技术解决方案

# 2.8.1 移动端浏览器

# 2.8.2 CSS 初始化 normalize.css

# 2.8.3 CSS3 盒子模型 box-sizing

# 2.8.4 特殊样式

# 2.9 移动端常见布局

# 2.9.1 移动端技术选型

# 3.0 流式布局（百分比布局）---常见的布局方式

# 案例：京东移动端首页

# 重点：二倍精灵图的做法

# 图片格式：

# 3.1 flex 弹性布局（最好用，最方便的布局方式）

# 3.1.1 flex 布局原理

# 3.1.2 flex 布局父项常见属性

# 3.2 flex 布局子项常见属性

# 3.2.1 flex 属性，从剩余空间中分配，表示占多数份数。

# 3.2.2 align-self 控制子项自己在侧轴的排列方式（了解）

# 3.2.3 order（了解） 定义子项的排列顺序 默认为 0

# 3.3 背景线性渐变 必须添加浏览器私有前缀

# 3.4 移动 WEB 开发之 rem 适配布局（非常流行）

# 3.4.1 rem 单位

# 3.4.2 媒体查询（Media Query）---CSS3 新语法

# 3.4.3 mediaType 查询类型

# 3.4.4 关键字

# 3.4.5 媒体特性

# 3.5 媒体查询+rem 实现元素动态大小变化

# 3.6 引入资源

# 3.7 less 基础

# 3.7.1 CSS 的弊端

# 3.7.2 less---CSS 的扩展语言，CSS 的预处理器 新的语言

# 3.7.3 less 变量

# 3.7.4 less 编译 easy-less 插件（vsdcode）

# 3.7.5 less 嵌套

# 3.7.6 less 运算

# 3.8 rem 适配方案 ---通过 rem 适配不同的屏幕

# 3.8.1 rem 适配方案技术使用

# 3.9 rem 实际开发适配方案 1 less+媒体查询+rem

# 3.9.1 设计稿常见尺寸宽度---现在基本以 750 为准

# 3.9.2 动态设置 html 标签 font-size 大小

# 3.9.3 元素取值方法

# 案例：苏宁首页制作

# 4.0 简洁高效的 rem 适配方案 flexible.js

# 4.1flexible.js+rem（更简单，更推荐）

# 4.2 VScode px 转 rem 插件 cssrem

# 移动端完整项目开发（详细见黑马面面文档）

# 1.1 蓝湖/募客写作平台

# 4.3 移动 web 开发之响应式布局

# 4.3.1 响应式开发原理

# 4.3.2 响应式布局容器

# 案例：响应式导航栏

# 4.4 Bootstrap 前端开发框架

# 4.4.1 Bootstrap 基本使用

# 1.container 类

# 2.container-fluid 类

# 4.5 Bootstrap 的栅格系统

# 4.5.1 栅格选项参数

# 4.5.2 列嵌套

# 4.5.3 列偏移 col-md-offset-* 实际是给对应的盒子加一个外边距

# 4.5.4 列排序 col-md-push-_ col-md-pull-_ 改变列的顺序

# 4.5.5 响应式工具

# 案例：阿里百秀首页

# 1.单独制作移动端页面（主流）京东商城手机版....

# 3.2.3 order（了解）定义子项的排列顺序默认为 0

# 3.3 背景线性渐变必须添加浏览器私有前缀

# 3.7.2 less---CSS 的扩展语言，CSS 的预处理器新的语言