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>