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

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案12 《使用CSS3媒体查询实现页面响应式》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案12 《使用CSS3媒体查询实现页面响应式》.docx（6页珍藏版）》请在优知文库上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课公共必修课口公共选修课专业必修课口素版拓展必修课专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其

2、中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务H更用CSS3媒体咨询实现页面响应式授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标素质目标：1.培养学生探究能力、终身

3、学习的能力：2 .培养学生的适应能力，与时佻进的意识，3 .培养学生编码的规他意识.知识FI标：1.了解页面媒体衣询的原理：2,掌报CSS3媒体行询；3.掌握CSS3的主翟页面样式尺寸单位：能力目标：I.掌握使用媒体杳询的方式进行PC球WEB网页改造为同时适应移动端与PC墙的的响应式页面.教学内容1. CSS3媒体查询2. CSS3媒体查前操作符3. 响应式原理I,相对单位.点魔点粒学重点：1.CSS3媒体查询2 .CSS3媒体杳询操作符3 .响应式原理4 .相对单位教学难点：1.CSS3媒体杳询操作符做学方法谈论法、讲授法、演示法、练习法索材S0文本素材团实物展示（ZPPT幻灯片口音频素材回

4、机频素材自动画素材图形/图像索材口刈络资源口其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数埴写,每次按课均应填写-份本龙.欣红期授i果可不另填写教案.注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；演希网络的快速发展,使用手机进行网页浏览，视顺播放,怡息交互成为了主流方式.通过让学生完成课前潮研了解当附移动设备正超过奥而设备,成为访问互联网的外；涔脂.互联网产品仅仅有一套适应大唐招的页面已经不能湎足移动浏览的需要，所以就需要为项目再设计一套移动端页面“带里学生紫跟时代潮流与时俱进。但是移动端页面设计上址Eie的问思是.不同移动设备之间的设备尺寸不同

5、.本单-元我仰需要掌握加何使用页面自适应的相关知识，制作，套可以适应不问设备的页面.二、新知识点、技能点讲解【的X分立】新课讲解1；【约20分钟】教师：响应式布局是E1.hanMarcotte2010年5月份提出的个概念,简而吉之,就是一个网站能步兼容多个终端一一而不是为每个终端归一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.响应式可以为不同终端的用户提供更加舒适的界面和更好的用户体验而I1.W1.普大屏幕移动设备的杵及，用“大势所趋”来形容也不为过.通俗的理解就是一套网页代码适配不同尺寸设备.在不同的尺寸页面上,显示必须的内容，隐藏不必要的内容.通过动态地对设备相关属性特点进行识别

6、判断使不用的样式代码生效与失效，从而时冏页可以根据设备属性的变化，进行相应的适配变化，具体的使用案例就是，使一套网页代码可以在不同的尺寸设备商展示不同的贞面效果.媒体查询时是实现页面的响应式的最常用方法之一.（案例演示）新课讲斛2：【约IS分钟】放舶media设备类型and选取条件条件生效时的样式内容I媒体类型的分类如K：media屈性用于为不同的媒介类型规定不同的样式：screen计犯机屏幕（默认值）Uy电传打字机以及使用等宽字符网格的类似探介IV电视类型设备（低分辨率、“眼的屏郁滚能力）projection放映机handhe1.d手持设备（小屏停、有限的带宽）print打印预览模式/打印页

7、bra11.c百人用点字法反馈设备aura1.语音合成器a1.1.适合所有设备口正广泛使用且所有浏览器都芸容的媒介类型是SCgf和air.对于设备来讲.具有如下特性内容“属性作用width网页显示区域完全等于设置的宽度height网页显示区域完全等于设置的高度max-width/max-height网页显示区域小于等于设置的宽度/高度min-width/min-width网页显示区域大于等于设置的宽度/高度orientationPortmi1.(竖屏模式)IIimdSe叩匕(横屏模式新课讲解3：【约15分钟】数师：在媒体食询中，操作符no【、and、On1.y和逗号(，)可以用来构建我杂的媒体

8、杳询.and操作符,用来把多个媒体属性组合起来.合并到同一条媒体查词中.只有当每个属性都为我时，这条查询的结果才为真.注意；在不使用not或。Ny愫作符的情况下，媒体类型是可选的，蚁认为a1.1.Qr操作符将多个媒体查询以逗号分1.放在一起：只要其中任何一个为我，整个媒体语句就返【可我,相当于Or盘作符.not愫作符，用来对条媒体代询的结果迸行取反.注意：o(关键字仅能应用于整个杳询，而不能单独应用于一个独立的查询on1.y操作符.表示仅在媒体查询匹配成功时应H1.指定样式.可以通过它让选中的样式在老式浏览器中不被应用.新课讲解4：【约45分钟】我师：外部式；edh=o111.yscreena

9、nd(max-width:480px).on1.yscreenand(max-dcvicc-width:480px)href=1.inkxss/解析：上面使用中OnIy可省略，区定于计算机显示器,第一个条件maxwidth是指演染界面以大宽度，第：个条件maxdevicewidh是指设备最大宽度.媒体查询的外部式引入,通过在head标签中的Iink标签设定.其形式同外部样式表的引入方式，不同点为：增加了media属性进行媒体查询条件的设定，通过href属性指定媒体食询条件生效时需要引入的CSS文件,嵌入式；mediaon1.yscreenand(max-width:4S0px).on1.ysc

10、reenand(max-dcvicc-width:480px)(f*相应CSS样式内容/.fontIco1.or:red;嵌入式的叨入方式与CSS的样式表写法相近.相应内模淞CSS文件中，通过设Btmcdia+媒体查询条件,再使用大括号包安对K的样式表内容.下面我来制作一个媒体查询形式的响应式页面.要求页面区始的背景色为粉红色（Pink）,当页面的宽吱不大600像索时，响应变化，将背景色变化为浅色Oightgreen）.（案例演示）新课讲解5：【约20分钟】敦师：在进行媒体钝询实现响应式布局时，我们会常常用到两个单位进行布局尺寸的设定，分别是Cm和rem。cm的值并不是固定的.cm会继承父级元

11、素的字体大小.在CSS标准要求浏览零的数认字体大小是16像素（16px）、所以所有未经调整的浏览；椰符合：1.cm=16px,但是em也有豌点，就是嵌套使用的问题，如body的fonisize0625em,body中的A元素的font-size:1.5e11.这里的Iem的实际值为16X0.6251.5=I5（px）.然后在A元素中设:定其子元素B的font-size:1.5cm.此时B元素的实际位为15X15=1.75（px）,以上连锁反应反应是开发时不希望出现的，所以以Cm作为单位的页面制作时，呆好不要进行字体大小的层层设置，经5金分享：那么O.75em=12px,0.62Sem=IOpx

12、.为了简化font-size的换算,实现整个页面的宽高单位统一，会在CSS中的为body元素设定fon1.-SiZC=62.5%的样式.这就使Cm的参考单位值变为16PX625%=10px,这样12px=I.2cm.IOpx=icm,也就是说只需要将你的原来的px数色除以10.然后换上em作为单位就行了。rem是CSS3新增的个相对单位（rooiem,根em）这个总位与em有什么区别呢?区别在于使用rcm为元素设定字体大小时,仍然是相对大小,但相对的只是HTM1.根元素，而这个HTM1.根元素中包含了head部分和body部分，通过样式维承，这个HTM1.根可以看作是body部分。这个单位可训集相对大小和绝对大小的优点于一价，通过它既可以做到只蟋改根元素就成比例地调整所有字体大小.又可以避免字体大小逐层配合的连快反应.那么在网页开发中使用那种单位最佳？选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览涔，都能切良好的支持rcm单位,邓推荐使用mm,如果要考虑兼容性,那就使用px.或者两者同时使用.学生；跟做新课讲斛8：【约20分钟】教师：演示操作上机任务期户登录页面增加响应式