了解认识flex布局的重难点知识以及移动端网页的特性

一、移动端网页

- 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
- 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

二、物理分辨率和逻辑分辨率

- 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
- 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率

三、视口

- 布局视口:iOS, Android基本都将这个视口分辨率设置为980px。

- 视觉视口:用户正在看到的网站的区域。

- 理想视口: 设备有多宽，我的网页就显示有多宽。

四、二倍图

- 其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。

- 简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

五、flex布局

1、主轴对齐方式

- center:沿主轴居中排列

- space-around:弹性盒子沿主轴均匀排列,  空白间距均分在弹性盒子两侧

- space-between:弹性盒子沿主轴均匀排列,  空白间距均分在相邻盒子之间

- space-evenly:弹性盒子沿主轴均匀排列,  弹性盒子与容器之间间距相等

2、侧轴对齐方式

- center:沿侧轴居中排列

六、圣杯布局

- 所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。