一、分辨率
- 物理分辨率：（硬件，出厂即成）
- 逻辑分辨率：（软件驱动）网页默认值 （主要是iPhone6/7/8的逻辑分辨率）
二、视口：显示HTML网页的区域，用来约束HTML尺寸
使用meta标签设置视口宽度，制作适配不同设备宽度的网页 （默认情况下宽度）
此时，只要填上如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
马上和设备宽度一致
详细解释：
-
viewport：视口
-
width=device-width：视口宽度 = 设备宽度
-
initial-scale=1.0：缩放1倍（不缩放）
三、二倍图
750px的图：即375px的二倍，目的是让图片清晰，默认375px会失真（全是像素点）
四、Flex布局
- Flex布局/弹性布局：
-
是一种浏览器提倡的布局模型
-
布局网页更简单、灵活
-
避免浮动脱标的问题
- Flex布局模型构成
- 作用：
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
- 设置方式
父元素添加 display: flex，子元素可以自动的挤压或拉伸
- 组成部分 弹性容器（大框）
弹性盒子（小框）
主轴（默认方向）
侧轴 / 交叉轴
3. 主轴对齐方式
- 修改主轴对齐方式属性: justify-content
justify-content：center；（两边加间距）
justify-content：space-around;(加在两侧，子级是父级的两倍)
justify-content：space-between;（加在弹性盒子之间）
justify-content：space-evenly;（所有间距相等）
- 侧轴对齐方式 （1） align-items:(全体)
默认：（stretch）
（弹性盒子无高度限制情况，拉伸）
（有高度）
（2）align-self:（单独的弹性盒子，子级）
高：
- 如果不给高，同时
align-self:center;那么子级就会用自己的内容做高度 - 如果不给高，则默认被拉伸，高度与父级相等
宽：
- 如果不给宽，那么子级就会用自己的内容做宽度
- 如果给宽，那么子级就按宽度展示
- 伸缩比
-
属性 flex : 值;
-
取值分类
数值(整数)
注意: 只占用父盒子剩余尺寸 例子：
5.主轴方向
-
主轴默认是水平方向, 侧轴默认是垂直方向
-
修改主轴方向属性: flex-direction
- 这里如果改变了：(所以要先确定主轴方向)
flex-direction:column;(即主轴方向变成侧向)
水平居中：align-items:center;
垂直居中: justify-content:center;
6. 弹性盒子换行
nowrap(默认值)
flex-wrap:wrap;
对齐方式：(行间)
align-content:center;(除evenly基本与justify-content类似)
项目的一些问题
1、 底部固定
/* 底部加边距80px是底部的高: 为了内容不被底部区域盖住 */
padding: 12px 11px 80px;
}
2、名字问题：（默认三个字长度）
.user_mes .user .top h5 {
width: 55px;
}
3、左右对齐
justify-content: space-between;
4、一行元素对不齐
解决方案：
align-items: center;
5、公共样式可单独书写，之后需要引用类即可
