1.4.2 制作响应式页面

响应式页面是指同一页面在不同屏幕尺寸下可实现不同的布局，从而使一个页面兼容不同的终端。这里所说的终端主要包括PC端和移动端，它们的分辨率和屏幕大小都是不同的。在开发网站时，只需加入响应式设计就可以兼容这些终端，而不必单独制作移动端页面。响应式开发主要是为了解决移动互联网浏览的问题，通过响应式设计能使网站在手机和平板电脑上有更好的浏览、阅读体验。

在开发移动端页面的过程中，当调整浏览器窗口时，将会通过判断浏览器窗口的宽度来改变样式，页面结构会根据浏览器窗口的大小重新展示，以适应不同的移动终端设备。例如，打开三星电子商城网站，运行结果如图1-6所示。

下面通过鼠标拖曳缩小浏览器的窗口宽度，会看到网页的布局会随之发生变化，效果如图1-7所示。

从图1-7可以看出，当调整了浏览器的窗口大小后，页面结构会发生相应的变化。由此可见，响应式设计给用户带来了友好的页面体验，同一个页面在不同的设备上可以实现不同的布局。

在理解了响应式页面的基本概念后，下面简要介绍响应式开发的特点。

1.跨平台

响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题，只需开发一套网站就可以在多个平台使用，给用户带来风格一致的视觉体验。

2.便于搜索引擎收录

响应式网站制作完成后，无论在移动端设备还是PC端设备上访问，访问的都是同一个链接地址，这样就不会分散网站的权重，提升网站对搜索引擎的友好度。

3.节约成本

响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。并且响应式网站可以实现只用一个后台来进行管理，多个终端的数据保持同步，这样在制作的时候就可以减少专职程序开发人员的配备。对于开发者而言，减少了大量重复的工作，提高了工作效率；对于公司而言，节省了人员开支，降低了开发成本。

小提示：

响应式设计是一种相对较新的技术，在比较老的设备或浏览器上加载页面的速度会比较慢。另外，因为在移动端和PC端上的用户体验不同，响应式也有一定的局限性，有可能无法同时满足两个平台的用户使用。