网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第7章 响应式设计与Bootstrap.docx

PAGE

PAGE1

第7章响应式设计与Bootstrap（4学时）

本章内容：

什么是响应式设计

使用媒体查询

中华美食网站的响应式设计

Bootstrap的安装与使用

Bootstrap网格与布局

Bootstrap格式设置

Bootstrap组件

1、什么是响应式设计

响应式设计是一种网页设计和开发的方法，旨在使网页能够适应不同的屏幕尺寸和设备类型，以提供一致的用户体验。响应式设计的目标是使网页在桌面电脑、平板电脑和手机等各种设备上都能够自动调整布局、字体大小、图像大小和导航等元素，以适应不同的屏幕大小和分辨率。（任意打开一些网站，查看是否是响应式设计。让学生在手机上打开网站，看是否是响应式设计。）

响应式设计的核心原则包括：

（1）流体网格布局：使用相对比例的流体网格布局来创建网页的布局。

（2）媒体查询：使用媒体查询来根据设备特性和视口属性应用不同的样式。

（3）弹性图片和媒体：确保网页中的图片和媒体元素能够自适应不同屏幕尺寸和分辨率。

（4）移动优先设计：采用移动优先设计的方法，首先针对移动设备进行设计和优化，然后再逐步增加和调整布局和功能以适应更大的屏幕尺寸。

视口设置

视口是指用户在浏览器中实际可见的区域。一般而言，不同设备（如桌面电脑、平板电脑和手机等）的视口大小会有所不同。为了确保网页在不同设备上能够适应和呈现良好，实现响应式设计，可以使用视口属性来设置和控制视口的行为。

head

metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no

/head

其中，通过设置width=device-width，视口的宽度将与设备的宽度相匹配；initial-scale=1.0表示网页的初始缩放比例为1.0，即不缩放；maximum-scale=1.0和user-scalable=no则禁止了用户手动缩放网页。

在绝大多数情况下，在响应式设计时使用以下视口设计即可：

metaname=viewportcontent=width=device-width,initial-scale=1.0

2、?使用媒体查询

什么是媒体查询

媒体查询（MediaQueries）是一种CSS3的功能，用于根据设备的特性或用户代理（通常指浏览器）的特性来应用不同的CSS样式。它允许开发者根据屏幕尺寸、设备类型、分辨率、方向等条件来针对不同的设备或环境应用特定的样式，因此在响应式设计中有非常重要的作用。

媒体查询通过在CSS中使用@media规则来定义，其中包含一个或多个条件和对应的样式规则。当媒体查询条件满足时，其中定义的样式规则将生效。例如：

@media(max-width:768px){

body{font-size:14px;}}

在这个例子中，@media(max-width:768px)表示当视口宽度小于等于768px时，其中定义的样式规则将生效。在这种情况下，body元素的字体大小将被设置为14px。

设置媒体查询

媒体查询以@media开头，表示这是一条媒体查询语句。@media后接一个或多个表达式，如果表达式为真，则应用样式。

媒体查询的语法如下（教材248）：

@media媒体类型逻辑操作符(媒体特性){

/*CSS样式*/

}

例如，以下代码设置了3条媒体查询，会在不同屏幕宽度时显示不同的背景颜色。

html

headtitle媒体查询示例/title

style

body{text-align:center;}

@media(max-width:600px){

body{background-color:red;}

}

@media(min-width:601px)and(max-width:1024px){

body{background-color:green;}

}

@media(min-width:1025px){

body{background-color:blue;}

}

/style

/head

body

h1媒体查询示例/h1

p屏幕尺寸不同，背景颜色也不同。/p

/body

/html

移动优先设计实例

html

headtitle移动优先设计示例/title

style

body{text-alig