前面我们学习了HTML和CSS了，PC 端的基本内容就算是写完了，今天跟大家分享一个新的知识，那就是我们的移动端
移动端最常见的开发布局方式就是流式布局，flex弹性布局，rem适配布局，响应式布局bootstrap 和vw/vh布局
一、流式布局
流式布局就是百分比布局，也称非固定像素布局。通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，主要是设置宽度。
流式布局方式是移动web开发中使用的比较常见的布局方式。设置以下属性是为了保护文本内容无限制扩张或者页面收缩导致内容丢失。
max-width 最大宽度（max-height最大高度)
min-width 最小宽度（min-height 最小高度)
注意：二倍图、多倍图的用法。
二、flex弹性布局
flexible Box简写，称为"弹性布局"或"flex布局"等，用来为盒状模型提供最大的灵活性。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。采用 Flex 布局的元素， Flex 容器，flex 容器的直接子元素会自动成为弹性项目。
优点：操作方便，相比传统布局方式布局极为简单，移动端应用很广泛。
缺点：PC端浏览器支持情况较差；兼容性差，在IE11或更低版本中不支持或仅部分支持
所以如果是PC端页面布局，可以使用传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局较为方便。布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
| 属性值 | 说 明 |
| row | 默认值，水平堆叠项目（从左往右） |
| row-reverse | 水平堆叠 flex 项目（但从右到左） |
| column | 设置垂直堆叠 flex 项目（从上到下） |
| column-reverse | 垂直堆叠 flex 项目（但从下到上） |
| 属性值 | 说 明 | |
|---|---|---|
| wrap | 规定 flex 项目将在必要时进行换行 | |
| nowrap | （默认）规定将不对 flex 项目换行（如果装不下则会自动缩小子元素的宽度） | |
| wrap-reverse | 规定如有必要，弹性项目将以相反的顺序换行 |
| 属性值 | 说 明 |
|---|---|
| center | 将 flex 项目在容器中间对齐 |
| flex-start | 将 flex 项目在容器顶部对齐 |
| flex-end | 将弹性项目在容器底部对齐 |
| stretch | （默认）拉伸 flex 项目以填充容器(flex项目不要给相应侧轴的高/宽度） |
| baseline | 使 flex 项目基线对齐 |
三，rem 适配布局
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。而em和rem相对于px更具有灵活性，t它们都是相对长度单位，由于长度可以变化所以更适用于响应式布局。在说rem之前先说em吧，它们有一点区别：em相对于父元素，而rem相对于根元素。
em：子元素字体大小单位如果使用em是相对于父元素字体大小，而元素的width/height/padding/margin属性用em的话则是相对于该元素的font-size大小。rem：相对于根元素html。
作⽤：1.使⽤@media查询，可以针对不同的媒体类型定义不同的样式
2.@media可以针对不同的屏幕尺⼨设置不同的样式
3.当重制浏览器⼤⼩的过程中，⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚面
rem优点：1、使页面布局文字大小随着屏幕大小的变化而变化；
2、流式布局和flex布局主要针对于宽度布局，rem非常方便地设置高度；
3、使屏幕发生变化的时候元素高度和宽度等比例缩放；
rem可以通过修改html里面的文字大小来改变页面中元素的大小达到整体控制的效果。
四.响应式布局
bootstrap实现响应式布局：
在bootstrap中可以利用栅格系统来实现响应式布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统原理：
首先栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。栅格系统分为12列，即每行最多可容纳12列。若里，一个.row内包含的列（column）大于12个（即，一行中的栅格单元超过12个单元），则会自动排版，总之，一行只能最多12列，具体分析后面会仔细讲解。
五.vw/vh布局
- vw/vh 是一个相对单位（类似 em 和 rem 相对单位）
- vw 是：viewport width 视口宽度单位
- vh 是：viewport height 视口高度单位
- 相对视口的尺寸计算结果
- 1vw = 1/100 视口宽度
- 1vh = 1/100 视口高度
如何还原设计稿？
前提：我们设计稿按照 iPhone 6/7/8 来设计，有个盒子是 50px * 50px 的，如何使用 vw 呢？
分析：
设计稿参照 iPhone 6/7/8，所以视口宽度尺寸是 375px
那么 1vw 的像素就是：375px / 100 = 3.75px
我们元素的目标是：50px * 50px
那么 50 * 50 的vw就有：50 / 3.75 = 13.3333vw