HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案12 《使用CSS3媒体查询实现页面响应式》

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《使用CSS3媒体查询实现页面响应式》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生探究能力、终身学习的能力；培养学生的适应能力，与时俱进的意识；培养学生编码的规范意识。知识目标：1.了解页面媒体查询的原理；掌握CSS3媒体查询；掌握CSS3的主要页面样式尺寸单位；能力目标：1.掌握使用媒体查询的方式进行PC端WEB网页改造为同时适应移动端与PC端的的响应式页面。教学内容CSS3媒体查询CSS3媒体查询操作符响应式原理相对单位重点难点教学重点：CSS3媒体查询CSS3媒体查询操作符响应式原理相对单位教学难点：CSS3媒体查询操作符教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：随着网络的快速发展，使用手机进行网页浏览，视频播放，信息交互成为了主流方式。通过让学生完成课前调研，了解当前移动设备正超过桌面设备，成为访问互联网的最广泛终端。互联网产品仅仅有一套适应大屏幕的页面已经不能满足移动浏览的需要，所以就需要为项目再设计一套移动端页面。希望学生紧跟时代潮流，与时俱进。但是移动端页面设计上最主要的问题是，不同移动设备之间的设备尺寸不同，本单元我们需要掌握如何使用页面自适应的相关知识，制作一套可以适应不同设备的页面。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋"来形容也不为过。通俗的理解就是一套网页代码适配不同尺寸设备。在不同的尺寸页面上，显示必须的内容，隐藏不必要的内容。通过动态地对设备相关属性特点进行识别判断，使不用的样式代码生效与失效，从而时网页可以根据设备属性的变化，进行相应的适配变化。具体的使用案例就是，使一套网页代码可以在不同的尺寸设备商展示不同的页面效果。媒体查询时是实现页面的响应式的最常用方法之一。（案例演示）新课讲解2：【约15分钟】教师：@media设备类型and选取条件{条件生效时的样式内容}媒体类型的分类如下：media属性用于为不同的媒介类型规定不同的样式：screen计算机屏幕（默认值）tty电传打字机以及使用等宽字符网格的类似媒介tv电视类型设备（低分辨率、有限的屏幕翻滚能力）projection放映机handheld手持设备（小屏幕、有限的带宽）print打印预览模式/打印页braille盲人用点字法反馈设备aural语音合成器all适合所有设备真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’。对于设备来讲，具有如下特性内容。属性作用width网页显示区域完全等于设置的宽度height网页显示区域完全等于设置的高度max-width

/

max-height网页显示区域小于等于设置的宽度/高度min-width

/

min-width网页显示区域大于等于设置的宽度/高度orientationportrait

(竖屏模式)

|

landscape

(横屏模式)新课讲解3：【约15分钟】教师：在媒体查询中，操作符not、and、only和逗号(，)可以用来构建复杂的媒体查询。and操作符，用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。注意：在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。or操作符，将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符。not操作符，用来对一条媒体查询的结果进行取反。注意：not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。only操作符，表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。新课讲解4：【约45分钟】教师：外部式：<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-width:480px)，onlyscreenand(max-device-width:480px)"href="link.css"/>解析：上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。媒体查询的外部式引入，通过在head标签中的link标签设定，其形式同外部样式表的引入方式，不同点为：增加了media属性进行媒体查询条件的设定，通过href属性指定媒体查询条件生效时需要引入的css文件。嵌入式：@mediaonlyscreenand(max-width:480px),onlyscreenand(max-device-width:480px){/*相应css样式内容*/.font{color:red;}}嵌入式的引入方式与CSS的样式表写法相近。相应内书写在css文件中，通过设置@media+媒体查询条件，再使用大括号包裹对应的样式表内容。下面我来制作一个媒体查询形式的响应式页面。要求页面原始的背景色为粉红色（pink）,当页面的宽度不大600像素时，响应变化，将背景色变化为浅绿色（lightgreen）。（案例演示）新课讲解5：【约20分钟】教师：在进行媒体查询实现响应式布局时，我们会常常用到两个单位进行布局尺寸的设定，分别是em和rem。em的值并不是固定的，em会继承父级元素的字体大小。在css标准要求浏览器的默认字体大小是16像素（16px）,所以所有未经调整的浏览器都符合:1em=16px。但是em也有缺点，就是嵌套使用的问题。如body的font-size:0.625em，body中的A元素的font-size:1.5em，这里的1em的实际值为16×0.625×1.5=15(px)。然后在A元素中设定其子元素B的font-size:1.5em，此时B元素的实际值为15×1.5=1.75(px)。以上连锁反应反应是开发时不希望出现的，所以以em作为单位的页面制作时，最好不要进行字体大小的层层设置。经验分享：那么0.75em=12px，0.625em=10px。为了简化font-size的换算，实现整个页面的宽高单位统一，会在css中的为body元素设定font-size=62.5%的样式，这就使em的参考单位值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。rem是CSS3新增的一个相对单位（rootem，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，而这个HTML根元素中包含了head部分和body部分，通过样式继承，这个HTML根可以看作是body部分。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。那么在网页开发中使用那种单位最佳？选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，都能够良好的支持rem单位，那推荐使用rem，如果要考虑兼容性，那就使用px，或者两者同时使用。学生：跟做新课讲解8：【约20分钟】教师：演示操作上机任务-用户登录页面增加响应式学生：跟做新课讲解9：【约20分钟】教师：演示操作上