5.1 响应式Web设计基础
1、响应式Web简介
除使用传统大屏PC外，现在越来越多的人使用小屏幕移动设备上网。传统网页设计是针对大屏的PC机而开发，基本上都是固定页面大小的，它不适合在小屏幕设备上浏览。如果为不同屏幕大小的设备都单独设计网页系统，显然成本非常大。这时，人们希望有某种设计技术，一次性设计网页就处处自适应地正常使用。因此，响应式Web设计（Responsive Web Design）技术应运而生。响应式Web设计是由Ethan Marcotte在2010年提出的，他将媒体查询、栅格布局和弹性图片合并称为响应式Web设计。
响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括：
（1）HTML5+CSS3：HTML5+CSS3为基本网页设计增添了新的标签与属性内容。
（2）HTML5的视口（viewport）：提供了用于配置视口的属性。在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。
（3）CSS3的媒体查询：识别媒体类型、特征（屏幕宽度，像素比等）。
（4）流式布局：可以根据浏览器的宽度和屏幕的大小自动调整效果。
（5）响应式栅格系统：依赖于媒体查询，根据不同的屏幕大小调整布局。
（6）流式图片：随流式布局进行相应缩放。
2、HTML5新特性
HTML5不仅仅是HTML规范的最新版本，它也代表了一系列Web设计技术的总称，其中最重要的三项技术就是HTML5核心规范、CSS3（Cascading Style Sheet，层叠样式表的最新版本）和JavaScript（一种脚本语言，用于增强网页的动态功能），这三项技术在后面的学习中都会涉及到。HTML的历史可以追溯到很久以前，在HTML基础部分已做讨论了。此处的关注点在于HTML5带来的全新感受。
（1）HTML5是对HTML的进化而非颠覆。使用浏览器打开以下网址：W3C HTML5 Logo，在该网站将看到HTML5的八大革新。
1）语义网（Semantics）：提供了丰富的语义化标签。
2）离线&存储（Offline& Storage）：HTML5 App Cache，LocalStorage，IndexedDB和File API使Web应用程序更加迅速，并提供了离线使用的能力。
3）设备访问（Device Access）：增强了设备感知能力使得Web应用在电脑、pad、手机上均能使用。
4）通信（Connectivity）：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。
5）多媒体（Multimedia）：音频视频能力的增强是HTML5最大突破！
6）图形和特效（3D,Graphics & Effects）：Canvas、SVG和WebGL等功能使得图形渲染更高效，页面效果更加炫酷。
7）性能和集成（Performance& Integration）：WebWorker让浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能。
8）呈现（CSS3）：CSS3可以很高效的实现页面特效，并不会影响页面的语义和性能。
（2）化繁为简。HTML5以“简单至上，尽可能简化”为原则做了以下改进：
1）简化DOCTYPE和字符集声明；
2）强化HTML5 API，让页面设计更加简单；
3）以浏览器的原生能力代替复杂的JavaScript代码；
4）精确定义的错误恢复机制，如果页面中有错误，也不会影响整个页面的显示。
（3）用户体验良好。HTML5规范以“用户至上”为宗旨。另外，HTML5还引入了一种新的安全模型来保证HTML5足够安全。各大浏览器对HTML5的支持正在不断完善，目前Chrome对HTML5的支持最好，Firefox、Opera、Safari、IE10对HTML5也有很好的支持。
3、HTML5基本语法
HTML文档是由多种标签组成，一个HTML5的标准模板如下所示：
<!DOCTYPE html> <!-- 位于文档最前面，用于向浏览器说明当前文档使用的HTML版本，不可省略。-->
<html lang="en"> <!-- lang属性规定元素内容的语言。 -->
<head> <!-- 一个HTML文档只能含有一对<head>标签，绝大多数该部分不会真正作为内容显示在页面中。主要用来封装其他位于文档头部的标签，例如<title>、<meta>、<link>等，用来描述文档的标题、作者以及和其他文档的关系等。-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <!--用于定义HTML文档所要显示的内容。1个HTML文档只能含有一对<body>标签。-->
<!--这是注释--> <!-- 该标签中的内容用于对代码进行解释，不会显示到浏览器中。-->
</body>
</html>
4、HTML5语义化标签
相比于传统的网页设计，HTML5的一大特点就是给标签赋予了更明确的语义，更加便于人和机器的理解。HTML5中常用的语义化标签，如下表所示。
| 标签名 | 描述 |
| <header> | 定义 section 或 page 的页眉。 |
| <section> | 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 |
| <article> | 规定独立的自包含内容，比如一篇文章。 |
| <aside> | 定义页面内容之外的内容。是内容的相关辅助信息。可用作文章的侧栏。 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 标签的标题。 |
| <nav> | 定义页面中导航链接的部分。 |
| <footer> | 定义 section 或 page 的页脚。 |
HTML5有了语义化结构标签，就对应有语义化标签布局，它与传统方式布局对比如下：
传统方式布局 语义化标签布局
5、CSS3新特性
CSS3是CSS的最新版本，该版本提供了更加丰富且实用的规范，如：列表模块、超链接、语言模块、背景和边框、颜色、文字特效、多栏布局、动画等等，这些规范的使用会在后面的单元中将依次讲解。另外，响应式设计就是通过CSS3的媒体查询来实现的。
（1）与CSS引入HTML文件完全一样，CSS3引入HTML文档也有行内式（在标签的style属性中引入）、内嵌式（使用style标签在文档头部引入）和外链式（在头部通过link标签引入.css文件）3种形式。
（2）浏览器私有前缀
为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下：
-webkit- ：只有以Webkit为内核的浏览器可以解析，如Chrome、Safari。
-moz- ：只有以Gecko为内核的浏览器可以解析，如Firefox。
-ms- ：只有以Trident为内核的浏览器可以解析，如IE。
-o- ：只有以Presto为内核的浏览器可以解析，如Opera。
（3）常用CSS选择器
CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
| 选择器 | 代码 | 示例代码 | 说明 |
| 通用选择器 | * | *{} | 选择所有元素。 |
| 标签选择器 | 元素名称 | a{}、body{}、p{} | 根据标签选择元素。 |
| 类选择器 | .<类名> | . beam {} | 根据class的值选择元素。 |
| id选择器 | #<id值> | #logo{} | 根据id的值选择元素。 |
| 属性选择器 | [<条件>] | [href]{}、[attr=”val”]{} | 根据属性选择元素。 |
| 并集选择器 | <选择器>,<选择器> | em,strong{} | 同时匹配多个选择器，取多个选择器的并集。 |
| 后代选择器 | <选择器> <选择器> | .asideNav li {} | 先匹配第二个选择器的元素，并且属于第一个选择器内。 |
| 子代选择器 | <选择器> > <选择器> | ul>li{} | 匹配匹配第二个选择器，且为第一个选择器的元素的后代。 |
| 兄弟选择器 | <选择器>+<选择器> | p+a{} | 匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a元素。 |
| 伪选择器 | : :<伪元素>或: <伪类> | p::first-line{}、a:hover{} | 伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。 |
伪选择器比较特殊，分为伪元素和伪类两种。
| 元素名 | 描述 |
| :root | 选择文档中的根元素，通常返回html。 |
| :first-child | 父元素的第一个子元素。 |
| :last-child | 父元素的最后一个子无素。 |
| :only-child | 父元素有且只有一个子元素。 |
| :only-of-type | 父元素有且只有一个指定类型的元素。 |
| :nth-child(n) | 匹配父元素的第n个子元素。 |
| :nth-last-child(n) | 匹配父元素的倒数第n个子元素。 |
| :nth-of-type(n) | 匹配父元素定义类型的第n个子元素。 |
| :nth-last-of-type(n) | 匹配父元素定义类型的倒数n个子元素。 |
| :link | 匹配链接元素。 |
| :visited | 匹配用户已访问的链接元素。 |
| :hover | 匹配处于鼠标悬停状态下的元素。 |
| :active | 匹配处于被激活状态下的元素，包括即将点击（按压）。 |
| :focus | 匹配处于获得焦点状态下的元素。 |
| :enabled (:disabled) | 匹配启用（禁用）状态的元素。 |
| :checked | 匹配被选中的单选按钮和复选框的input元素。 |
| :default | 匹配默认元素。 |
| :valid (:invalid) | 根据输入数据验证，匹配有效（无效）的input元素。 |
| :in-range (out-of-range) | 匹配在指定范围之内（之外）受限的input元素。 |
（4）浮动与定位
在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式，使网页内容变得丰富多彩，CSS的浮动和定位完美的解决了这个问题。
1）浮动
CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。
框1{float:none} 框1{float:right}
框1{float:left} 框1、2、3{float:left}
2）定位
在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下：
position:relative; /*相对定位方式*/
left:30px; /*距左边线30px*/
top:10px; /*距顶部边线10px*/
用于设置菜单定位方式的常用属性值如下表所示。
| 值 | 描述 |
| static | 静态定位（默认定位方式）。 |
| relative | 相对定位，相对于其原文档流的位置进行定位。 |
| absolute | 绝对定位，相对于 static 定位以外的第一个上级元素进行定位。 |
| fixed | 固定定位，相对于浏览器窗口进行定位。 |
用于设置元素具体位置的常用属性值如下表所示。
| 边偏移属性 | 描述 |
| top | 顶端偏移量，定义元素相对于其参照元素上边线的距离。 |
| bottom | 底部偏移量，定义元素相对于其参照元素下边线的距离。 |
| left | 左侧偏移量，定义元素相对于其参照元素左边线的距离。 |
| right | 右侧偏移量，定义元素相对于其参照元素右边线的距离 |
3）浮动与定位的使用实例
其实浮动的本意是用来解决图片和文字排版问题的，但是由于它十分好用，被大部分开发者应用到了网页布局，并成为了公认布局的一种方式。
该图中4个粉色部分使用浮动的知识对页面进行布局，然后使用绝对定位知识创建了一个浮动的div元素。需要注意的是，position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现。float也会导致元素脱离文档流，漂浮在文档流的上层，能遮挡下层元素的空间，但不会遮挡下层元素的内容。
参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动和定位</title>
</head>
<body>
<header class="header">header</header>
<aside class="aside">aside</aside>
<section class="main">section</section>
<footer class="footer">footer</footer>
<div class="float-div">floatdiv</div>
</body>
</html>
5770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
