移动端特点
1.PC端网页和移动端网页的有什么不同：1.PC屏幕大，网页固定版心
手机屏幕小 2. 网页宽度多数为100%。
2.如何在电脑里面边写代码边调试移动端网页效果：谷歌模拟器
3.屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量。
指的是屏幕对角线的长度，一般用英寸来度量
4分辨率
1.硬件分辨率（出厂设置），物理分辨率是生产屏幕时就固定的，它是不可被改变的。
2.缩放调节的分辨率（软件设置），逻辑分辨率是由软件（驱动）决定的。
3.制作网页参考：逻辑分辨率。
视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.viewport：视口 2.width=device-width：视口宽度 = 设备宽度
3.initial-scale=1.0：缩放1倍（不缩放）
二倍图
能够使用像素大厨软件测量二倍(2x)图中元素的尺寸.
百分比布局
能够使用百分比布局开发网页:
1.能够使用百分比布局开发网页
2.效果： 宽度自适应，高度固定
lex布局
Flex布局/弹性布局：
1.是一种浏览器提倡的布局模型
2.布局网页更简单、灵活
- 避免浮动脱标的问题
Flex布局模型构成
作用
1.基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
3.设置方式：父元素添加 display: flex，子元素可以自动的挤压或拉伸
4.组成部分：1.弹性容器 2. 弹性盒子 3. 主轴 4. 侧轴 / 交叉轴
主轴对齐方式
justify-content：
屏幕截图 2022-04-04 205307.png
侧轴对齐方式
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
屏幕截图 2022-04-04 205529.png
伸缩比
flex :1-10 给子盒子添加 ，子盒子占父盒子的几份空间。注意 : 只占用父盒子剩余尺寸
