今天从移动端的特点、百分比布局、flex布局三大点来进行学习。
一、移动端
1.PC端/移动端不同？
PC端：
- 屏幕大，网页固定版心
- 浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）
移动端：
- 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
- 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性
2.物理分辨率和逻辑分辨率
- 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
- 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率
3.视口（viewport）
说明：就是浏览器显示页面内容的屏幕区域。
分类：
1.布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。
2.视觉视口。用户正在看到的网站的区域。
3.理想视口。 设备有多宽，我的网页就显示有多宽
4.视口标签（meta）
说明：有了视口标签，可以达到我们想要的理想视口。
代码：
<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 则允许用户缩放
5.二倍图
其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。
- 网页美工的设计稿基本是 750px
- 我们前端工程师拿到设计稿利用像素大厨选择 2X， 进行缩小一半，按照提示的单位开发即可。
二、百分比布局
百分比布局， 也叫流式布局
百分比布局特点:宽度自适应，高度固定。
三、flex布局
flex布局极大的提高了我们布局的效率，更简单、灵活。
注意：display: flex; 一定要给亲爸爸加。
1.主轴对齐方式（justify-content）
justify-content: space-between;两侧没缝隙
justify-content: space-around;记住2倍
justify-content: space-evenly;空隙一样大
justify-content: center;让一个盒子水平居中
2.侧轴对齐方式（align-items）
侧轴对齐方式有两种：
align-items 控制所有的子元素。代码写在父元素内
align-self 控制单个子元素，且此代码放在子元素内。代码写在子元素内
align-items: center;让元素垂直居中
3.伸缩比
说明：把父盒子分为若干份数，每个子盒子各占几份。
语法：
flex: 1;比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。
注意：
- 一定要给子盒子添加。
- 子盒子默认高度会和父盒子一样高。
4.圣杯布局
所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索
核心思路：
- 两侧盒子写固定大小
- 中间盒子 flex: 1; 占满剩余空间
注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1；
5.小结
- 在flex眼中，标签不再分类。 ·简单说就是没有块级元素，行内元素和行内块元素 ·任何一个元素都可以直接给宽度和高度一行显示
- Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
6.特别注意
不是X轴就是主轴，也不是Y轴就是侧轴，后期会学到修改主轴方向的代码，所以一定不要搞混了，切记切记！！
