移动端常见布局

单独制作移动端页面(主流)

1. 流式布局(百分比布局)

通常情况下，如果盒子被无限拉伸，其中的内容会受到影响，所以父盒子一般会设置max-width和min-width！

案例：京东移动端首页

2. flex弹性布局

2.1 传统布局 VS flex布局

2.2 布局原理

2.3 父项常见属性

(1) flex-direction 设置主轴的方向

(2) justify-content 设置主轴上的子元素排列方式

flex布局中当项目在一行内摆放不开时，系统会默认修改项目的宽度，强制项目在一行显示（之前学习的布局子元素会在第二行继续排列）。
出现这种情况是因为父级盒子的属性flex-wrap默认设置为no,也就是所有的项目不换行。

(3) flex-wrap 设置子元素是否换行

另外，还有wrap-reverse 这一属性值!

1. flex-wrap: nowrap;

2. flex-wrap: wrap;

3. flex-wrap: wrap-reverse;

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

stretch使用时子盒子不要给高度。

(5) align-content 设置侧轴上的子元素的排列方式（多行）

注意：
align-items只适合子项为单行！align-content 只适合子项为多行！

(6) flex-flow

练习：
flexbox游戏1
flexbox游戏2

2.4 子项常见属性

在父级转换成flex元素模式的基础上，子项运用以下属性。

(1) flex属性

(2)align-self 控制子项自己在侧轴上的排列方式

(3) order 属性定义项目的排列顺序

z-index 在垂直方向上，order 在水平方向上。

3. less+rem+媒体查询布局

3.1 rem说明

em 是相对于父元素的字体大小来说的；
而rem 是相对于html元素的字体大小来说的，代表为父元素单位的两倍。

rem优点：
可以通过修改html里面的文字大小来整体改变改变页面中元素的大小

3.2 媒体查询

(1) 媒体查询介绍

(2) 语法规范

1. mediatype查询类型
   screen
2. 关键字
3. 媒体特性

(3) 媒体查询+rem实现元素动态大小变化

html的相关css写在媒体查询中

引入资源（理解）

媒体查询最好的方法是从小到大。

3.3 less基础

(1) 维护css的弊端

(2) less介绍

less与css都是一门语言！

(3) less使用

(4) less变量

(5) less编译

(6) less嵌套

在less文件中，子元素的样式直接写到父元素的样式里面就好了，生成css文件时会自动生成次相应的css样式。

如果有伪类、交集选择器、伪元素选择器，我们内层选择器的前面需要加&！

注意：less文件中注释为//。

(7) less运算

数字、颜色、变量都可以进行运算：

(8) less适配方案

rem实际开发适配方案

rem适配方案技术使用（市场主流）

方案一

方案二