移动Web第三天 1 移动端特点 2 百分比布局 3 Flex布局
移动Web
文章目录
- 移动Web
- 老师：黑马程序员
- 三、移动Web第三天
- 1 移动端特点
- 1.1 移动端和PC端网页不同点
- 1.2 谷歌模拟器
- 1.3 分辨率
- 1.3.1 屏幕尺寸
- 1.3.2 PC分辨率
- 1.3.3 分辨率分类
- 1.3.4 移动端主流设备分辨率
- 1.4 视口
- 1.5 二倍图
- 2 百分比布局
- 3 Flex布局
- 3.1 Flex布局介绍
- 3.2 Flex布局模型构成
- 3.2.1 作用
- 3.2.2 设置方式
- 3.2.3 组成部分
- 3.3 主轴对齐方式
- 3.4 侧轴对齐方式
- 3.5 伸缩比
- 3.6 主轴方向
- 3.7 弹性盒子换行
老师：黑马程序员
三、移动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实现弹性盒子多行排列效果