第10章 移动端布局和响应式开发-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第10章 移动端布局和响应式开发 计划学时 10学时 内容分析 本章介绍了视口、流式布局、Flex布局、rem单位、媒体查询、Less、Bootstrap框架和Bootstrap栅格系统 教学目标 与 教学要求 【知识目标】 1. 了解3种不同的视口 2. 认识和使用Less 【技能目标】 1. 掌握流式布局、Flex布局和rem布局的应用 2. 熟练使用媒体查询 3. 掌握Bootstrap框架和Bootstrap栅格系统的应用 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握Flex布局的容器属性和项目属性，熟练使用媒体查询，掌握Bootstrap框架的应用 教学难点 实现本章节的3个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （视口、流式布局） 一、提出需求，导入学习任务 （1）思考如何设计移动端布局和响应式页面。 · 移动端的横屏竖屏切换，需要有针对性的响应式布局。移动端布局有流式布局、Flex布局、rem布局等，不同的网页可以使用不同的布局方式来呈现。而响应式开发能够使页面内容可以在不同的设备上有适应性地展现出来，让用户更方便地在不同设备上浏览网页。 （2）明确学习方向。 · 了解3种不同的视口 · 掌握流式布局 二、知识讲解 （一）视口 1.概述 视口(viewport)是浏览器显示页面内容的屏幕区域。视口可以分为布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）。 布局视口是指网页的固定宽度，是早期为了解决PC端页面在手机上的显示问题，根据不同的设备而设置的默认宽度。视觉视口是屏幕的可视部分，不包括屏幕键盘，缩放外的区域，视觉视口比布局视口相同或者更小。理想视口是指对设备而言最理想的视口尺寸，能够使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。 2.使用视口 通过<meta>视口标签可以在不同的设备上设置视口，<meta>视口标签的语法格式如下所示。 <meta name="viewport" content="视口的属性"> 完整视口的写法如下所示。 <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui"> 3.移动端基础交互 移动端的显示页面与PC端的显示页面是有所区别的，因此需要为全局页面设置特殊的样式，移动端特殊样式如下所示。 *{ -webkit-tap-highlight-color: transparent; /* 清除点击屏幕时的高亮显示 */ } html, body { -webkit-user-select: none; /* 禁止选中文本 */ } a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } input{ -webkit-appearance: none; /* 取消文本框或按钮的默认外观样式，以便自定义外观 */ } （二）流式布局 1.概述 流式布局也叫百分比布局，是一种等比例缩放的布局方式，是移动端开发中经常使用的布局方式之一。流式布局是对页面以百分比方式划分区域进行排版，可以在不同分辨率下显示相同的版式，将盒子的宽度设置成百分比，搭配min-*和max-*属性使用。流式布局的实现方法是将CSS固定像素宽度换算为百分比宽度，换算公式为“目标元素宽度/父盒子宽度=百分数宽度”。 2.特点 · （1）盒子宽度自适应，使用百分比来定义，但高度使用固定px像素值定义。 · （2）盒子内的图标、字体大小等都是固定的，不是所有内容都是自适应。 · （3）在CSS样式中，需要使用min-*和max-*属性来设置盒子在设备中的最小宽度和最大宽度，防止任意拉伸页面带来的异常问题的发生。 3.演示说明 使用流式布局在移动端页面上分别展示3张不同比例大小的图片。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第二学时 （Flex布局、案例） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 掌握Flex布局 二、知识讲解 （一）Flex布局 1.概述 Flex是Flexible