移动Web 第三天 移动端特点 、 百分比布局 、 Flex布局

移动端特点

1.PC端网页和移动端网页的有什么不同：1.PC屏幕大，网页固定版心
手机屏幕小 2. 网页宽度多数为100%。
2.如何在电脑里面边写代码边调试移动端网页效果：谷歌模拟器
3.屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量。
指的是屏幕对角线的长度，一般用英寸来度量
4分辨率
1.硬件分辨率（出厂设置），物理分辨率是生产屏幕时就固定的，它是不可被改变的。
2.缩放调节的分辨率（软件设置），逻辑分辨率是由软件（驱动）决定的。
3.制作网页参考：逻辑分辨率。

视口

1.viewport：视口 2.width=device-width：视口宽度 = 设备宽度
3.initial-scale=1.0：缩放1倍（不缩放）

二倍图

能够使用像素大厨软件测量二倍(2x)图中元素的尺寸.

百分比布局

能够使用百分比布局开发网页:
1.能够使用百分比布局开发网页
2.效果： 宽度自适应，高度固定

lex布局

Flex布局/弹性布局：
1.是一种浏览器提倡的布局模型
2.布局网页更简单、灵活

3. 避免浮动脱标的问题

Flex布局模型构成

作用

1.基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

2. 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 给子盒子添加 ，子盒子占父盒子的几份空间。注意 : 只占用父盒子剩余尺寸