在引入响应式设计之前，网站通常都是固定宽度的，这意味着网站的设计无论在多大的屏幕上都是以相同的宽度显示。在智能手机出现后，这就真的行不通了，因为网站在小屏幕上显得很小，用户必须不断地进行缩放来阅读

关键词： 1  4　总结 

一个单独的手机网站具有一组独立的URL，这会影响你的网站在搜索结果中的排名。如果你有两个不同版本的页面，它们具有相同或相似的内容，但URL 不同（例如，http: www example com 和http: m example com），

关键词： 1  3  3　搜索优化 

使用响应式设计最明显的优势是，无论是网站、设计、代码还是内容，你都只需要创建一份。如果你的网站有一个单独的手机版站点，你需要创建和维护两套（或更多）完全独立的HTML 页面。任何改动都需要对每一个站点

关键词： 1  3  2　更少的工作 

1 3　为什么是响应式设计响应式网页设计的概念自首次提出以来一直备受热议。就像任何新技术思想一样，有些人接受它，另一些人则唾弃它。1 3 1　每个设备都得到正确的设计使用响应式设计最有说服力的理由是，你创

关键词： 设备 

这些思想（媒体查询或灵活性）本身都不是新的或开创性的思想。但在2010 年，网页设计师Ethan Marcotte 琢磨出来一套组合使用这些概念来制作网站的方法，能够自动对不同的屏幕尺寸做出响应。Marcotte 创造了响

关键词： 网页设计 

媒体查询可以重排你的页面布局，但如果没有灵活性做基础，响应式设计将无法工作。首先，在你的站点中几乎每一种水平度量都需要采用灵活的单位，而不是僵化的像素。这意味着各栏的宽度和其他布局元素将以百分比定

关键词： 灵活性 

网页设计社区重拾流式布局的理念，使用基于百分比的宽度，并设法让其成为一种适用于小型移动设备的解决方案。使用百分比而不是像素使得网页及页面各部分都能够自动改变宽度来适应任意屏幕尺寸，因此也就很容易地

关键词： 媒体 

做一个iPhone 网站，他们如是说。起初，在iPhone 是智能手机市场仅有的霸主玩家时，这种方式很好。但没多久，其他手机公司很快紧跟潮流，推出它们的产品以应对iPhone。但这些新的智能手机并非都拥有相同的尺寸

关键词： 更多  设备 

因为设计师习惯于制作固定宽度的网页，所以最简单明了的解决方案是制作单独的移动版网站（具有一个固定的页面宽度，适配320 像素宽的屏幕，而不是常见的1024 像素宽的显示器），如图1-6 所示。如果用户使用的

关键词： 网站 

手机首次能访问因特网是在20 世纪90 年代中期，它们通常并不具备显示实际网站的能力，而只能显示文本数据，比如天气预报、股票报告和比赛得分。最初的移动浏览器只能显示基本的HTML 格式，且通常是黑白而不是

关键词： 移动  Web浏览 

1 2　简史在学习响应式设计是如何产生的之前，了解一点网页设计的历史是有帮助的。1 2 1　固定宽度设计几年以前，网站是被设计成固定宽度的，以便很好地适配最常见尺寸的台式机和笔记本的屏幕。在2000 年，这意

关键词： 宽度 

如果你拿起本书，是因为你听说过响应式设计，但还不是很明白它到底是什么，本节将帮助你了解响应式设计的基本知识。即使你有一定的响应式设计经验，也可能觉得很难用通俗的语言向别人解释它。本节将给你一个更好

关键词： 基础 

现在，网络世界中的所有人几乎都听说过响应式网页设计（通常称为RWD，即Responsive Web Design 的缩写），但大部分人并没有很好地理解它是什么。在本章中，你将学习响应式网站的基础知识。之后，我们将简述网

关键词： 概述 

目录前言 　　XV第一部分　响应式设计基础第1章　什么是响应式设计 　　31 1　一点儿基础 　　31 2　简史 　　61 2 1　固定宽度设计 　　61 2 2　移动Web 浏览 　　71 2 3　移动网站 　　81 2 4　更多的

关键词： 目录 

2007 年，iPhone 的发布对于网站设计来说是一个转折点，网站设计师们突然失去了对画布（我们在上面设计网站）的控制。此前，网站只是在显示器屏幕上供人浏览，尽管屏幕尺寸有所不同，但差别并不是那么大。而现

关键词： 前言 

编辑推荐：全面覆盖从项目立项到网站上线的工作流程详细讲解响应式设计策略和技巧，为各式设备打造最优的用户体验充分利用渐进增强优化用户体验不仅面向Web开发人员，适合从事网站相关工作的各类人群阅读参考内容

关键词： 宣传语 

本书分为四部分，全面介绍响应式Web 设计策略与技术，引领大家掌握从项目立项到网站上线的响应式设计工作流程。第一部分介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、必

关键词： 学习  响应式  设计 

如果大家一直跟着前面的教程在做，那到现在已经为继续实现更高级的设计打好了基础。我们来清点一下吧，我们已经有了：一个完善的HTML5标记结构，内置了很多最佳实践；一个标准的Bootstrap样式表文件，已链接；能

关键词： 小结 

要支持IE8，需要一段JavaScript代码让浏览器能够响应媒体查询。这段代码就是Scott Jehl的respond js腻子脚本。Bootstrap自身的文档推荐这样做以兼容IE8。相关的信息可以参考这里：http: getbootstrap com ge

关键词： 1  9  4　支持IE8 

如果一切顺利，那说明你已经成功地把LESS编译成了CSS，而且也成功地包含了Bootstrap的JavaScript插件。如果不顺利，可以再检查一遍以下事项。你的标记结构嵌套关系是否正确？有没有未闭合、不完整或错配的标签

关键词： 故障