1.移动端特点
01-移动端和PC端网页不同点
1.png
02-谷歌模拟器:pc端转换成移动端后,要把网页刷新一遍
2.png
03-分辨率
1.屏幕尺寸：指的是屏幕对角线的长度，单位一般为英寸；
.物理分辨率/设备分辨率：指的就是当前屏幕所拥有的物理像素点的个数！！！它是不可被软件(驱动)改变，出厂就固定了的；
.逻辑分辨率：指的就是设备宽度和高度，单位为像素，设计图会根据逻辑分辨率去设计页面，它是可以被软件/驱动所更改的
.物理像素点：显示图像最小单位
PPI：单位英寸内所拥有的物理像素点的个数，像素密度，密度越大，屏幕越清晰
3png
4.png
4.
5png
5.
6png
04-视口 : 使用meta标签设置视口宽度，制作适配不同设备宽度的网页
1.默认在没有视口标签的情况下,网页的宽度和逻辑分辨率不同,移动端默认的页面宽度是980px
7.png
8.png
9.png
05-二倍图: 为了高分辨率下图片不会模糊失真
10.png
2.百分比=流式布局
百分比布局,也叫流式布局
特点:宽度自适应,高度固定
缺点:不够灵活
3.Flex布局=弹性布局
Flex布局也叫弹性布局
11png
02-Flex布局模型构成及其优点和设置方式
.在Flex布局模型中，是通过调节主轴或侧轴的对齐方式来设置盒子之间的间距。
12.png
添加弹性布局:给父盒子添加 display:flex; (简写:df)
弹性容器 display:flex;默认宽度和父元素宽度一样，默认的高度由内容所撑开
弹性盒子：弹性容器的最近一级子元素(亲儿子子元素)
1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸);
.浮动不会和display:flex一起使用的,基础班学的属性，除了浮动不能配合df使用以外，其他的都可以
2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个);
3.默认不会自动换行，宁愿牺牲自己的宽度，都不会自动换行
03-Flex布局模型对齐方式
1.主轴对齐方式
13.png
2.侧轴对齐方式
14png
15.png
4.伸缩比
使用flex属性修改弹性盒子伸缩比
16png
17.png
