阶段目标:使用字体图标,动画等C3属性丰富网页效果和呈现方式,能够开发移动端网页
CSS3:使用平面、空间转换和动画属性,丰富网页元素呈现方式和效果
Flex:了解移动端与PC端屏幕和网页布局差异,使用Flex布局模型实现网页布局
移动适配:能够实现视口宽度不同时,网页元素宽高等比缩放效果
响应式:了解响应式网页特点,能够使用bootstrap框架开发响应式网页
一、移动端特点
1. 移动端和PC端网页的不同点
- PC端屏幕大,网页固定版心
- 手机屏幕小,网页宽度多为100%
2. 谷歌模拟器
F12
3. 分辨率
- PC分辨率
1920 * 1080
1366 * 768
- 缩放150%
(1920/150%)*(1080/150%)
硬件分辨率(出厂设置)
缩放调节的分辨率(软件设置)
制作网页时参考的是逻辑分辨率
4. 视口
使用meta标签设置视口宽度,制作适配不同设备宽度的网页
<meta name="viewport" content="width=device-width, initial-scale=1.0">
作用:实现设备和网页宽度一致
5. 二倍图
图片分辨率,为了高分辨率下图片不会模糊失真
-
参考iPhone6/7/8,设备宽度375px产出设计稿
-
二倍图设计稿尺寸:750px
二、百分比布局
也叫流式布局,也称非固定像素布局,是移动Web开发比较常见的布局方式。
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充。
宽度自适应,高度固定
三、Flex布局
1. Flex布局/弹性布局
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
2. Flex布局模型构成
- 作用:
- 基于Flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生
- Flex布局非常适合结构化布局
- 设置方式
- 父元素添加==
display:flex
==,子元素可以自动的挤压或拉伸
- 父元素添加==
- 组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴/交叉轴
3. 主轴对齐方式
修改主轴对齐方式属性:justify-content
属性值 | 作用 |
---|---|
flex-start | 默认值,起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
display: flex;
/* 居中 */
justify-content: center;
/* 间距在弹性盒子(子级)之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级的两侧 */
/* 视觉效果:子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;
4. 侧轴对齐方式
修改侧轴对齐方式属性:
align-items
(添加到弹性容器)align-self
:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
属性值 | 作用 |
---|---|
flex-start | 默认值,起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
stretch | 默认值,弹性盒子沿着主轴线被拉伸至铺满容器 |
5. 主轴方向
属性值 | 作用 |
---|---|
row | 行,水平(默认值) |
column | * 列,垂直 |
row-reverse | 行,从右向左 |
column-reverse | 列,从下向上 |
display: flex;
/* 1. 先确定主轴方向;2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
/* 修改主轴的方向:列 */
flex-direction: column;
/* 视觉效果:实现盒子水平居中 */
align-items: center;
/* 视觉效果:实现盒子垂直居中 */
justify-content: center;
6. 弹性盒子换行
display: flex;
/* 默认值:不换行 */
flex-wrap: nowrap;
/* 弹性盒子换行 */
flex-wrap: wrap;
/* 调节行的对齐方式 */
align-content: center;
align-content: space-around;
align-content: space-between;