高二下北京理工大学出版社移动Web前端开发课件第6章 实践响应式设计

本章简介： 第6章　实践响应式设计 传统 Web 设计主要针对计算机端高分辨率的显示器，一般会采用固定宽度如业内流行的960 像素。但随着智能手机的广泛普及，越来越多的人利用手机等小屏幕设备上网冲浪，百度最新大数据统计显示，35.87% 的用户上网设备分辨率为 360px×640px。 所谓响应式设计，是指针对任何设备分辨率进行网页内容完美布局的一种设计方式，是将各种布局方式、弹性图片、媒体查询结合起来的设计。设计的出发点可以从计算机屏幕开始，逐步缩小重排适应未知设备分辨率；也可以为最小的设备分辨率进行设计，逐步增强对大屏幕设备的适应性。 课堂学习目标 了解什么是响应式设计。 理解响应式设计与媒体查询的关系。 掌握如何构造 CSS3 媒体查询。 掌握为特定的视口设定 CSS 样式。 掌握固定布局转化为等量的相对尺寸布局。 掌握不同分辨率下弹性图片的处理。 能够使用弹性盒模型创建响应式布局。 6.1　【案例15】媒体查询 案例分析——响应式“西游首页”制作 实现步骤 知识点讲解——媒体查询的语法和特性 案例练习 6.1.1　案例分析——响应式“西游首页”制作 适合计算机屏幕的西游网站已经完成了，但在移动设备广泛使用的今天，必须考虑用户使用手机等小屏幕设备访问网站的可能性。现在来改造“西游首页”，不同分辨率下首页显示效果如图 6.1 所示。 1．需求分析 图 6.1　不同分辨率下首页显示效果 根据最终效果，对案例进行分析，对适应大分辨率的西游网站利用 CSS 媒体查询进行优雅降级： （1）将网站可能浏览的设备屏幕划分为 3 种：大于 992px、768~992px、小于 768px，据此为网站设计断点：大屏幕、中等屏幕、小屏幕。 （2）不同分辨率下网页内容的显示与隐藏。 （3）导航区域的显示与隐藏。 2．设计思路 （1）大屏幕完整显示网站；中等屏幕隐藏网站 LOGO 和搜索文本框；小屏幕时，自动隐藏网站头部，当用户单击网站顶端右侧的按钮时显示导航条。 （2）重新修正 HTML 部分，利用媒体查询设计不同断点下的显示效果。 （3）通过编写 JavaScript 实现导航区域的显示与隐藏功能。 6.1.2 实现步骤 1．HTML 部分 以网页中的头部为例，它包含两个部分，搜索区域和导航区域。两个部分均放置在header 标签中，同时设计 container 类，用作两部分的封装盒，在媒体查询中实现不同设备分辨率下自适应，代码详见案例源代码。 2．搜索区域媒体查询 为了满足响应式设计，在 CSS 中新增了几个类，并在 HTML 中使用。首先是 container 类，它在不同的屏幕分辨率下有不同的大小设置。代码如下所示： .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} @media（min-width: 768px） { .container {width: 750px;} } @media（min-width: 992px） { .container {width: 970px; } } 根据案例分析，设置了 visible-md、visible-lg，利用 media 媒体查询实现在中等屏幕下，隐藏网站 LOGO 和搜索文本框。 .visible-md,.visible-lg {display: none !important;} @media（min-width: 992px） and（max-width: 1199px） { .visible-md {display: block !important;} } @media（min-width: 1200px） { .visible-lg {display: block !important;} } 3．导航区域的媒体查询 导航区域大于 768px 时均能正常显示，在屏幕分辨率小于 768px 时，横向导航改为竖向列表，并进行隐藏，在网页顶部左侧显示网站名称，右侧显示三条横线组成的按钮。利用JavaScript 语言实现当单击按钮时显示竖向导航，再次单击隐藏导航。代码如下所示： @media（max-width: 768px） { #header > nav > .container > .nav-header .navbar-toggle { display: block;} #header > nav > .container > .nav-header .nav-brand{display: block;} #header > nav{background-repeat: