第1篇 Bootstrap基础

第1章 响应式网站简介

1.1 认识响应式网页布局

1.1.1 响应式网站

随着移动终端的迅猛发展，人们在移动终端浏览网页信息的时间不断增长，许多企业针对移动终端专门制作了移动版的网站，但这种方式造成了网站信息维护方面的麻烦，时间久了之后会导致PC端网站与移动终端网站数据不一致。另外，如果使用移动终端输入PC端网站的域名，网站连接成功后，网页会自动进行浏览设备的判断，导致网站重新定位到移动版网站，这就导致了输入不同网址有相同内容的情况。

为了解决这些问题，2010年5月，国外著名网站设计师Ethan Marcotte提出了“响应式网站设计（Responsive Web Design, RWD）”的概念。响应式网站设计的理念是页面的设计与开发应当根据用户行为以及设备环境进行相应的调整和响应，如图1-1所示。

响应式网站设计的核心就是通过用户输入一个网址信息，借助一套HTML内容、一套程序代码，结合CSS3媒体查询（Media Query）技术实现计算机PC终端、手机、iPad、微信等自适应的网页布局，具体的实现方式由多方面组成，包括弹性网格和布局、图片、CSS3媒体查询等技术的使用。无论用户正在使用笔记本电脑还是iPad，浏览的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备，换句话说，就是页面应该有能力自动响应用户的设备环境。响应式网站设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，在浏览器端判断不同设备的窗口大小，让同一个网页自动运用不同的CSS来变化编码的配置。

1.1.2 响应式网页布局的优缺点

简单来说，要体验响应式布局，就必须有支持HTML5与CSS3的浏览器，可以使用IE 9以上版本以及Chrome、Firefox、Opera、Safari等浏览器。

1．响应式网页布局的优点

（1）对用户友好

响应式页面设计可以给用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕。现在移动技术发展日新月异，几乎每天都会有新款智能手机推出，拥有响应式页面设计，用户可以与网站一直保持联系，这也是响应式实现的初衷。

（2）积累分享

响应式页面设计可以让用户通过单一URL地址收集所有的社交分享链接，可以为创建更友好的网站而做出积极贡献。

（3）最佳化搜索引擎

响应式页面设计使得搜索引擎也变得越来越聪明，使它们足够智能，可以完成移动网站和桌面网站的连接。

（4）品牌形象一致

响应式页面设计使得同一个网站适用于各种设备，自然不需要针对不同版本来设计不同的页面视觉效果。

（5）更少维护

响应式网页不需要单独开发独立的移动网站，只需要直接使用CSS属性针对不同设备进行调整。

2．响应式网页布局的缺点

（1）旧版浏览器不支持

由于响应式网页是与CSS3的媒体查询技术配合使用的，旧版的浏览器并不支持媒体查询技术。不过，虽然IE 8和之前的浏览器，可以通过下载并在页面中添加css3-mediaqueries.js来解决这个问题。

（2）加载速度问题

在响应式网页设计中，需要下载一些看起来并不必要的HTML/CSS，而且图片并没有根据设备调整到合适大小，这些都是导致加载时间加倍的原因。

（3）时间花费

开发响应式网站是一项耗时的工作，如果计划把一个现有网站转化成响应式网站，可能耗时更多。

（4）小尺寸屏幕不适合显示复杂的功能界面

响应式网页设计不需考虑在不同设备上的运行，为了让响应式网页适合不同的浏览设备，在功能上必须有所取舍。响应式网页属于网站对应的网页，并非常用的App，若是想要实现一些复杂功能，例如拍照、文件传输等，仍然需要开发合适的App。

1.1.3 响应式设计概念

响应式设计概念是基于流式布局（自适应布局）、流式图像（自适应图像）、流式表格（自适应表格）、流式视频（自适应视频）和媒体查询等技术的组合，以显示一个非固定尺寸的网页状态。以往固定宽度的网页布局是无法在如今多变且未知的设备中呈现最佳浏览体验的。

响应式设计的核心是流式网格（Fluid Grids）、媒体查询、流式图像（Fluid Images）。

1．流式网格

流式网格是将网页元素以各种大小方格来进行网页版面的布局设计，使之能按照浏览器的大小自由缩放网页元素。

在响应式页面设计的布局中，不再以像素（px）作为唯一的单位，改为采用百分比或者混合百分比、像素为单位，以便设计出更灵活的内容布局。

2．媒体查询

媒体查询是CSS3的技术，是从CSS2的Media Type延伸而来的，在特定环境下借助查询到的各种属性值（比如设备类型、分辨率、屏幕尺寸及颜色）来决定给予网页什么样的内容样式。

3．流式图像

伴随着流式网格的弹性和自适应性，图像作为重要的信息形式之一，也必须有更为灵活的方式去适应网页布局的变化。

1.1.4 认识视口

视口（Viewport）的作用是告诉浏览器目前设备有多宽或多高，在用户通过不同设备浏览网站时可以作为缩放的基准比例。若网站中少了此段语句，则无论响应式网页做得多漂亮、多丰富，在移动设备中网页都会以高分辨率的模式来显示，这时用户就必须通过放大或缩小的操作来阅读网页。

使用视口可以根据设备的显示区域来展示HTML文件，可以放大或缩小页面，以符合设备的可视化区域，通常会有初始值缩放的级别或其他规则。具体使用时，需要在网站的head区域使用meta标签加载视口屏幕分辨率设置的语句，使用meta标签时，在content中写属性，用逗号隔开，具体如下。

在视口设置中，content中的属性名及其含义如表1-1所示。