移动端特点

1.pc和移动端的区别：PC屏幕大，网页固定版心； 手机屏幕小， 网页宽度多数为100%
2.屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量
3.设备分辨率。
分辨率分类
物理分辨率： 是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率： 是由软件（驱动）决定的
4.视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

Snipaste_2022-04-07_20-04-37.png

百分比布局

百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定
一般width用100%表示

flex布局

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
设置方式：父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分： 弹性容器 弹性盒子 主轴 侧轴 / 交叉轴

主轴对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
修改主轴对齐方式属性: justify-content

Snipaste_2022-04-07_20-12-04.png

侧轴对齐方式

修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

Snipaste_2022-04-07_20-13-25.png