移动端特点
PC端/移动端不同
pc端 1.屏幕大 网页有固定的版心 2.pc端浏览器繁多 要注意各浏览器兼容性的问题 （布局 浮动+定位+标准流）
移动端 1.手机屏幕小 网页宽度多数为100% 去适配手机宽度 2.移动端则不需要考虑兼容性问题 ，放心大胆使用css新特性
物理分辨率和逻辑分辨率
视口 （viewport) 结束浏览器显示页面内容的屏幕区域
视口的分类：
- 布局视口 iOS, Android基本都将这个视口分辨率设置为980px。
2.视觉视口 用户正看到的网站区域
3.理想视口 设备有多款 我们的网页就有多宽
视口标签
有了视口标签 就能达到我们想要的理想视口 视口标签html生成时即可自带移动端理想视口 我们根据需求在进行添加
- width=device-width：视口宽度=设备宽度
- initial-scale=1.0：初始页面缩放倍数
- maximum-scale=1.0 最大缩放倍数
- user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
二倍图
其实实际开发中还有三倍图 甚至多被图， 但目前开发市场还是二倍图偏多 所以我们称为二部图
简单理解，二倍图的存在就是为了让页面中的图片更加清晰 ，遵循即可 1.网页美工的设计稿基本是750px 2.我们前端工程师拿到设计稿用像素大厨选择2x 进行缩小一半 按照提示的单位开发即可
flex布局
flex布局极大提高了我们的布局效率 相比浮动 更简单 更灵活
注意：display: flex; 一定要给亲爸爸加
主轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
如果非要问我那个常用，我只能说是 space-between
justify-content: space-between;
显示效果： 两侧没缝隙
justify-content: space-around;
效果如下 记住两倍
justify-content: space-evenly;
效果如下：记住空隙一样大
justify-content: center;
效果如下：经常用于让我们的弹性盒子水平居中
记忆：
- 两侧没缝隙是 between
- 缝隙一样大是 evenly
- 2倍缝隙是 around
小技巧
见到这个效果，最简单的做法就是： 给大盒一个 左右的padding， 然后在加
justify-content: space-between
侧轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
重点记住center ，可以让元素垂直居中。
align-items: center;
我们可以通过flex让一个子盒子水平和垂直居中。
伸缩比
把父盒子分为若干份 ，每个盒子各占几份。
flex：1； 一定给我们弹性子盒子加 分配父级剩余空间
语法：
比如有一个父盒子里面有三个子盒子 ，每个盒子写flex：1； 此时每个子盒子均分父盒子 各占三分之一
html结构
显示效果：
1.一定是给子盒子添加的
2.子盒子默认高度会和父盒子一样高 （前提是不给高度）
圣杯布局
所谓圣杯布局 就是左右两边大小固定不变 ，中间宽度自适应 一般这种布局方式适用于各种移动端顶部的搜索部分 ，这是最常见的 如京东手机版 主页那顶部搜索
核心思路： 1.两侧盒子给固定大小 2中间盒子给flex：1；占满剩余空间
注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；
小结
1.在flex眼中 咱们的标签不再分类 简单说就是没有块元素 行内元素 行内块元素的区别 这时元素 都成为父盒子（弹性容器）里面的弹性盒子 任何一个元素都可以直接给宽高 并且在一行显示 2.flex 当然也并不存在浮动 脱标的情况 ：也就是说基本上淘汰浮动 更不用清除浮动 3.当然也存在兼容性问题 ，如果不考虑兼容性可以大量使用 ，如果是移动端则不用考虑 直接使用flex caniuse.com/ 可以查看兼容性
