PC端/移动端不同？
PC端
- 屏幕大，网页固定版心
- 浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）
移动端
- 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
- 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性
物理分辨率和逻辑分辨率
- 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
- 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。
视口的分类：
布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口。用户正在看到的网站的区域。
理想视口。 设备有多宽，我的网页就显示有多宽
视口标签
有了视口标签，可以达到我们想要的理想视口。
```<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- width=device-width：视口宽度=设备宽度
- initial-scale=1.0：初始页面缩放倍数
- maximum-scale=1.0 最大缩放倍数
- user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
二倍图
其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。
简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。
主轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
侧轴对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
