《移动Web前端开发》教学讲义 第18讲.docVIP

《移动WEB前端开发》 配套教学教案 第18讲 课时内容 媒体查询 授课时间 135分钟 课时 3 教学目标 ? 了解什么是响应式设计 ? 理解响应式设计与媒体查询的关系 ? 掌握如何构造CSS3媒体查询 ? 掌握为特定的视口设定CSS样式 教学重点 ? 掌握如何构造CSS3媒体查询 ? 熟练为特定的视口设定CSS样式 教学难点 使用媒体查询，理解优雅降级和渐进增强 教学设计 1. 教学思路：通过改造“西游首页”，促使学生理解媒体查询的相关知识，理解优雅降级和渐进增强，能够利用媒体查询改造网页。 2. 教学手段：（1）演示法，通过欣赏“西游首页”最终效果理解响应式；（2）讲授法，通过知识讲解帮助学生掌握教学重点。 教学内容 演示案例引入新课： 适合桌面电脑屏幕的西游网站已经完成了，但在移动设备广泛使用的今天，我们必须考虑用户使用手机等小屏幕设备访问网站的可能性。观察改造后的“西游首页”，其在不同分辨率下首页显示不同效果。 案例效果 知识讲解：具体可结合本项目的PPT课件进行配合讲解。 1 媒体查询基本语法 在CSS3中我们可以利用Media Queries设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。 1）语法 @media media type and|not|only (media feature) { CSS-Code; } 语法说明： （1）media type，媒体类型。 （2）not、and和only为逻辑运算符，用于构建复杂的媒体查询。 （3）meida feature,媒体特征。大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。 （4）css code：这里放置css代码，在媒体查询逻辑运算符为真时才生效。 2）引入媒体类型 （1）利用@import方法 （2） 利用link方法引入样式表 2 设置Media标签 使用Media时需要在网页头部设置下面这段代码，来兼容移动设备的展示效果： meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no 语法说明： （1）name=viewport，手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。 （2）width = device-width：宽度等于当前设备的宽度。 （3）initial-scale：初始的缩放比例（默认设置为1.0）。 （4）minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）。 （5）maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）。 （6）user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）。 3 优雅降级与渐进增强 优雅降级是针对最高级的、最完善的浏览器设计网站，然后为那些旧（过时）版本的浏览器提供基本（简陋）的浏览体验，有时会设定一个分界点，声明客户的浏览器版本过低，建议更新后浏览。 渐进增强则是内容至上，在设计之初采用WEB标准的标签为基础，保证所有的浏览器均可使用，在此基础上针对高级浏览器进行CSS样式设计，改进JavaScript交互效果和追加功能达到更好的用户体验。 小结 了解什么是响应式设计 理解响应式设计与媒体查询的关系 掌握如何构造CSS3媒体查询 掌握为特定的视口设定CSS样式 作业 谈一谈对响应式布局的看法,什么叫优雅降级和渐进增强? 西游首页完成了搜索区域的响应式设计，试着将轮播图改造成为响应式。