移动Web第三天 1 移动端特点 && 2 百分比布局 && 3 Flex布局

移动Web

老师：黑马程序员

三、移动Web第三天

1 移动端特点

1.1 移动端和PC端网页不同点

PC端网页和移动端网页的有什么不同?

• PC屏幕大，网页固定版心
• 手机屏幕小，网页宽度多数为100%

如何在电脑里面边写代码边调试移动端网页效果?

• 谷歌模拟器

1.2 谷歌模拟器

使用谷歌模拟器调试移动端网页

1.3 分辨率

1.3.1 屏幕尺寸

指的是屏幕对角线的长度，一般用英寸来度量

1.3.2 PC分辨率

• 硬件分辨率（出厂设置)
• 缩放调节的分辨率（软件设置)

1.3.3 分辨率分类

• 物理分辨率是生产屏幕时就固定的，它是不可被改变的
• 逻辑分辨率是由软件（驱动)决定的

1.3.4 移动端主流设备分辨率

1.4 视口

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

• viewport:视口
• width=device-width :视口宽度=设备宽度
• initial-scale=1.0∶缩放1倍（不缩放)

1.5 二倍图

使用像素大厨软件测量二倍图中元素的尺寸

2 百分比布局

百分比布局，也叫流式布局

效果∶宽度自适应，高度固定。

3 Flex布局

3.1 Flex布局介绍

Flex布局/弹性布局∶

• 是─种浏览器提倡的布局模型
• 布局网页更简单、灵活
• 避免浮动脱标的问题

3.2 Flex布局模型构成

3.2.1 作用

• 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
• Flex布局非常适合结构化布局

3.2.2 设置方式

父元素添加display: flex，子元素可以自动的挤压或拉伸

3.2.3 组成部分

• 弹性容器
• 弹性盒子
• 主轴
• 侧轴/交叉轴

3.3 主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

3.4 侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

3.5 伸缩比

使用flex属性修改弹性盒子伸缩比

属性

• flex：值

取值分类

• 数值(整数)

只占用父盒子剩余尺寸

3.6 主轴方向

使用flex-direction改变元素排列方向

3.7 弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果