关键词：
第33 章项目实战-兼容响应式布局[1]
学习要点：
1.响应式初探
2.起始部分
本章主要开始如果将前两个项目再进行重构，设计成既可以在PC 端正常显示，又可以
在PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计
了。
一．响应式初探
在前面的两个项目中，我们分别设计了PC 端固定布局和移动端流体布局的案例。其实，
通过上面两个案例，已经可以做出兼容PC、PAD 和移动端的响应式页面了。而本节课，就
是将上面两个案例改成三个终端都可以正常显示的响应式布局。
我们这节课并不去过多的探讨响应式的种种方案、技巧、实战等等，那个是另外一门专
门的响应式开发课程，我们会在以后专门探讨，而HTML5 第一季布局课，只是最为最基础
的入门来了解一下响应式的设计。
响应式设计最重要的环节就是媒体查询，我们仿造一个最为流行的Bootstrap 框架中
的媒体查询代码，具体如下：
/*媒体查询，参考部分Bootstrap 框架*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
}
二．起始部分
项目起始部分，首先构建出HTML5 的基本格式以及CSS 的基本样式。
//移动或响应式Web 页面缩放设置
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
//PC 端拷贝过来，增加了一些class 响应式隐藏
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="information.html"><span
class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">
订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏
</a></li>
<li><a href="about.html">关于<span class="xs-hidden">
公司</span></a></li>
</ul>
</nav>
</div>
</header>
//CSS 部分
#header {
width: 100%;
height: 70px;
background-color: #333;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
z-index: 9999;
}
#header .center {
max-width: 1263px;
height: 70px;
margin: 0 auto;
}
#header .logo {
width: 30%;
height: 70px;
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
float: left;
}
#header .link {
width: 70%;
height: 70px;
line-height: 70px;
color: #eee;
float: right;
}
#header .link li {
width: 20%;
text-align: center;
float: left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#adver {
max-width: 1920px;
margin: 0 auto;
padding: 70px 0 0 0;
}
//媒体查询部分
/*在480 和767 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 480px) and (max-width: 767px) {
#header, #header .center, #header .logo, #header .link {
height: 45px;
}
#header .link {
line-height: 45px;
}
#header .logo {
display: none;
}
#header .link {
width: 100%;
}
#adver {
padding: 45px 0 0 0;
}
}
/*在小于480 像素的屏幕,这里的样式才生效*/
@media (max-width: 479px) {
#header, #header .center, #header .logo, #header .link {
height: 45px;
}
#header .link {
line-height: 45px;
}
#header .logo, .xs-hidden {
display: none;
}
#header .link {
width: 100%;
}
#header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
}
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>瓢城旅行社--响应式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>
<div id="adver">
<img src="img/adver.jpg" >
</div>
</body>
</html>
@charset "utf-8";
body,h1,h2,h3,p,ul,ol,form,fieldset,figure {
margin: 0;
padding: 0;
}
div,figure,img {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "5B8B4F53", simsun, sans-serif;
}
img {
display: block;
max-width: 100%;
}
ul,ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
.none {
display: none;
}
#header {
width: 100%;
height: 70px;
background-color: #333;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
z-index: 9999;
}
#header .center {
max-width: 1263px;
height: 70px;
margin: 0 auto;
}
#header .logo {
width: 30%;
height: 70px;
background: url(../img/logo.png) no-repeat left center;
text-indent: -9999px;
float: left;
}
#header .link {
width: 55%;
height: 70px;
line-height: 70px;
color: #eee;
float: right;
}
#header .link li {
width: 20%;
text-align: center;
float: left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#adver {
max-width: 1920px;
margin: 0 auto;
padding: 70px 0 0 0;
}
/*媒体查询，参考部分Bootstrap 框架*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
#header, #header .center, #header .link {
height: 45px;
}
#header .logo {
display: none;
}
#header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
#header, #header .center, #header .link {
height: 45px;
}
#header .logo, .xs-hidden {
display: none;
}
#header .link {
width: 100%;
line-height: 45px;
}
#header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
}
第33章项目实战-兼容式响应布局3
第33章项目实战-兼容响应式布局[3]学习要点：1.标题响应式2.图片响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情
第33章项目实战-兼容式响应布局6
第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情
原理+实战快速掌握响应式开发
...统2-9分而治之&预处理工具2-10JavaScript2-11调试方法第3章项目实战-音乐社区官网首页从环境搭建，到页面各部分代码编写，再到模拟调试，多设备浏览，gulp插件集成。完整实现一个音乐社区类的官网首页，把前面的知识融汇到... 查看详情
第32章项目实战-移动端流体布局3
第32章项目实战-移动端流体布局[3]学习要点：1.搜索部分2.旅游部分3.媒体查询本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．搜索部分搜索部分包含三个内容，背... 查看详情
第32章项目实战-移动端流体布局4
第32章项目实战-移动端流体布局[4]学习要点：1.旅游图片部分本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游图片部分//HTML部分<divclass="container"><figure>... 查看详情
第32章项目实战-移动端流体布局6
第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情
第31章项目实战-pc端固定布局9
第31章项目实战-PC端固定布局[8]学习要点：1.资讯内容2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．资讯内容和首页一样，只不过这里，布局方式有所不同，具体如下：二... 查看详情
第32章项目实战-移动端流体布局5
第32章项目实战-移动端流体布局[5]学习要点：1.导航固顶2.三个栏目3.公司简介本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．导航固定由于移动设备屏幕高度较低... 查看详情
第31章项目实战-pc端固定布局10
第31章项目实战-PC端固定布局[10]学习要点：1.机票预定2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．机票预定机票预定页面，具体如下：二．代码详解//全部代码<formactio... 查看详情
第31章项目实战-pc端固定布局4
第31章项目实战-PC端固定布局[4]学习要点：1.热门旅游区2.标题介绍区3.旅游项目区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．热门旅游区本节课，我们将探讨一下首页最核心的部... 查看详情
第31章项目实战-pc端固定布局8
第31章项目实战-PC端固定布局[8]学习要点：1.归类合并2.子导航本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．归类合并在前面几节课中，有一部分HTML代码比较松散，没有统一到一个类... 查看详情
第31章项目实战-pc端固定布局3
第31章项目实战-PC端固定布局[3]学习要点：1.搜索区2.插入大图3.搜索框本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．搜索区本节课，我们接着header头部往下，来设计一块搜索区。这... 查看详情
第31章项目实战-pc端固定布局5
第31章项目实战-PC端固定布局[5]学习要点：1.底部区域2.说明区域3.版权及证件区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．底部区域本节课，我们将探讨一下首页中最底部的区域... 查看详情
第31章项目实战-pc端固定布局6
第31章项目实战-PC端固定布局[6]学习要点：1.分离CSS2.头部区域3.内容区域本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．分离CSS本节课，我们将要创建一个新的页面：旅游资讯。那么... 查看详情
第31章项目实战-pc端固定布局7
第31章项目实战-PC端固定布局[7]学习要点：1.侧栏制作2.详细代码本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．侧栏制作本节课，主要设计一下内容页面的侧栏部分，分三个小块。经... 查看详情
响应式开发一招致胜
...样分析设计图1-10响应式网站设计实践原则第2章如何组织项目目录结构介绍了约定优于配置的思想，常见的项目目录和文件的组织方式，一些基本文件的作用等知识，为编码开始做准备。2-1简述2-2文件夹的组织2-3有用的文件1（rob... 查看详情
精通高级rxjava2响应式编程思想
...。先简单介绍和回顾RxJava，之后进入源码分析，再以实战项目来加深 查看详情
java响应式编程springbootwebflux基础与实战
第1章课程介绍课程介绍及导学1-1导学第2章函数式编程和lambda表达式本章介绍函数式编程的概念，和lambda表达式的基础语法，并分析了惰性求值的应用和实现。最后同意反编译字节码，重点剖析了lambda表达式的底层实现原理2-1概... 查看详情