一、移动端特点
（1）PC端网页与移动端的不同
PC端：屏幕大，网页有固定版心；
移动端：屏幕小，网页宽度多数为100%。
（2）分辨率
◆屏幕尺寸：☞屏幕对角线的长度，一般用英寸度量
◆分辨率分类：
1、物理分辨率是生产屏幕时就固定的，它是不可被改变的
2、逻辑分辨率是由软件（驱动）决定的。
（3）视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
视口.png
（4）二倍图
二倍.png
二、百分比布局（流式布局）
效果： 宽度自适应，高度固定
提示：有语义化标签：footer、 header
流.png
三、Flex布局（★弹性布局）
与浮动（float）区别：
浮动：不占位、脱标，容易导致父盒子塌陷
flex布局：
a、是一种浏览器提倡的布局模型
b、布局网页更简单、灵活、快速
c、 避免浮动脱标的问题
（1）设置方式：
给父元素添加 display: flex
子元素可以自动的挤压或拉伸
（2）组成部分：
a、弹性容器：弹性盒子的父亲
b、弹性盒子
c、 主轴
d、侧轴 / 交叉轴
flex布局.png
（3）主轴对齐方式（水平方向）
◆属性: justify-content
◆属性值：
主轴.png
A、space-around：
![]()
盒子2.png
盒子2.png
B、space-between
![]()
父盒子0.png
父盒子0.png
C、space-evenly
![]()
一样距离.png
一样距离.png
（4）侧轴对齐方式（垂直方向）
◆属性1: align-items（添加到弹性容器，父盒子）
◆属性2: align-self 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
◆属性值
侧轴.png
（5）伸缩比
◆目的：使用flex属性修改弹性盒子伸缩比。
◆属性：flex：值；
◆取值分类：数值（整数）
注意： 只占用父盒子剩余尺寸
四、总结
（1）弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)
1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)；
3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行。
（2）
弹性容器设置的属性：df，jc，ai
弹性盒子设置的属性：align-self，flex
