Bootstrap响应式Web开发（第2版）-课件 第3章 移动Web屏幕适配.pptx

第3章移动Web屏幕适配;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;目录/Contents;媒体查询;3.1媒体查询;;3.1媒体查询;3.1媒体查询;3.1媒体查询;3.1媒体查询;3.1媒体查询;;创建media.html文件，在该文件中创建基础HTML5文档结构。;;;;保存上述代码，在浏览器中打开media.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，将移动设备的视口宽度设置为983px，media.html文件的页面效果如下图所示。;将移动设备的视口宽度设置为730px，media.html文件的页面效果如下图所示。;3.1媒体查询;3.1媒体查询;;;流式布局和弹性盒布局;3.2.1流式布局;;百分比宽度=目标元素宽度/父容器宽度;.item{

width:100%;

};3.2.1流式布局;;复制本章配套源代码中的images文件夹并放入chapter03目录下，该文件夹保存了本章所有的图像素材。;;;;;保存上述代码，在浏览器中打开TabBar.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，然后将移动设备的视口宽度设置为576px，TabBar.html文件的页面效果如下图所示。;3.2.2弹性盒布局;;弹性盒布局主要由Flex容器和Flex元素组成。Flex容器是指应用弹性盒布局的容器，该容器中的所有子元素称为Flex元素。

Flex容器内有两根轴：主轴（MainAxis）和交叉轴（CrossAxis）。默认情况下主轴为水平方向，交叉轴为垂直方向。Flex元素默认沿主轴排列，根据实际需要可以更改Flex元素的排列方式。;弹性盒布局的使用步骤：

首先要设置父元素的display属性为flex，表示将父元素设置为Flex容器。

然后使用Flex容器和Flex元素的属性控制元素的排列和对齐。;style

.container{display:flex;

/*在此使用Flex容器相关的属性*/

}

.box{

/*在此使用Flex元素相关的属性*/

}

/style

body

divclass=containerdivclass=box/div/div

/body;3.2.2弹性盒布局;3.2.2弹性盒布局;3.2.2弹性盒布局;3.2.2弹性盒布局;3.2.2弹性盒布局;3.2.2弹性盒布局;3.2.2弹性盒布局;;;;;保存上述代码，在浏览器中打开NavBar.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，将移动设备的视口宽度设置为768px，NavBar.html的页???效果如下图所示。;rem单位、vw单位和vh单位;3.3.1rem单位;3.3.1rem单位;;;3.3.1rem单位;;编写页面结构，具体代码如下。;;;3.3.1rem单位;3.3.1rem单位;3.3.2vw单位和vh单位;3.3.2vw单位和vh单位;在设置元素的宽度和高度时，不建议同时使用vw单位和vh单位。如果同时使用vw单位和vh单位来定义元素的宽度和高度，可能会导致元素在不同屏幕宽高比下显示不正确的比例或出现变形。;3.3.2vw单位和vh单位;;;;保存上述代码，在浏览器中打开viewportunits.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，将移动设备的视口宽度设置为375px，viewportunits.html的页面效果如下图所示。;字体图标;3.4.1什么是字体图标;什么是字体图标？;;3.4.1什么是字体图标;3.4.2下载字体图标;;;将鼠标指针移到顶部导航栏的“素材库”，单击“官方图标库”进入官方图标库列表页面，如下图所示。;;;;;;单击“添加至项目”按钮，“加入项目”区域如下图所示。;;;;;3.4.3使用字体图标;3.4.3使用字体图标;3.4.3使用字体图标;3.4.3使用字体图标;3.4.3使用字体图标;3.4.3使用字体图标;;;;;;3.4.3使用字体图标;二倍图;3.5二倍图;什么是二倍图？;;1.实现img标签图像的二倍图;2.实现背景图像的二倍图;3.5二倍图;;创建picture.html文件，在该文件中创建基础HTML5文档结构。;;;保存上述代码，在浏览器中打开picture.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，将移动设备的视口宽度设置为375px，picture.html的页面效果如下图所示。;SVG;3.6.1什么是SVG;什么是SVG？;;3.