一。无处不在的Web
常见的响应式网站前端工程师们一般会使用三种已有的工具：’媒介查询‘，’流动布局‘，’自适应图片’；创建一个在不同分辨率屏幕下都能漂亮地显示的站点。
一个成功的响应式的设计方法其实是建立在于渐进增强非常相似的原则之上的，其实，响应式设计就是打了激素的渐进增强。很长一段时间以来，Web社区一直在提倡“优雅降级”，一个类似于计算机网络这样的计算机领域借用过来的词，其主要思想是：当你利用新的特性（那些能力最强的浏览器支持的特性）时，你要保证那些相对较老的浏览器也能访问你的内容。渐进增强从本质上来说，就是把优雅降级给倒过来，不像优雅降级那样先为最新的，最强劲的浏览器开发站点，然后再让功能较差的浏览器能使用多少就使用多少功能；相反，渐进增强会先创建一个基本体验，该基本体验使用具有语义的标识和结构定义，并侧重于内容以一种简洁的方式来展现，同时这也是一种具有可用性的形式，之后再保证基本体验的前提下，才可以开始着手做有关显示的布局和交互，但此时会为能力更强的浏览器创建更吩咐的体验。
响应式设计使用了同样的思想，并会针对不同的设备提供适当的内容和布局，即先从一个基本的体验开始，然后使用流动布局和媒介查询这些技术来为功能更多，屏幕更大的设备增强使用体验
二。流式布局
布局选项：
1）固定布局：在固定布局中，页面宽度会被指定为特定大小的像素，其中960px是使用最为广泛的宽度，在最近比较流行的1024分辨率 屏幕的最佳页面宽度应该介于974到984px之间。
固定布局是web布局中最为常见的实现方式，因为固定布局会给人一种对页面拥有较多控制权的错觉，能确切地知道你的站点会以多宽来显示，这使得你能创建出拥有大量图形的设计，而且即使在不同的屏幕上，它们也能看起来相当一致
然而，固定布局最大的问题在于，你所做的一切都是在许多假设前提之下的，当你决定站点应该有多宽时，你不得不去猜测什么样的尺寸可以照顾到大多数的访客，而这其中又暗藏着比从表面上看起来多得多的技巧。当浏览器宽度小于站点的固定布局的宽度时，用户就会看到丑陋的水平滚动条
2）流动布局
在流动布局中，度量的单位不再是像素，而是变成了百分比，这样可使页面具有可变的特性，你可以设计一个占容器宽度百分之60的内容栏，一个占容器宽度百分之30的边栏，以及一个占容器宽度百分之10的分隔区域，采用这种方法定义，意味着你不用再去关心用户使用的到底是1024px宽的桌面浏览器，还是768px宽的平板电脑浏览器，因为元素的宽度会根据浏览器窗口的宽度自动进行调整
流动布局的设计可以避免许多会在固定布局中遇见的问题，例如，在大多数情况下，流动布局中都不会出现水平滚动条，由于站点可以根据浏览器窗口的宽度来自动调节自身宽度，因此站点将可以充分利用并适应各种大学的可用空间，从而也就避免了在使用大屏幕设备浏览固定布局时，人们所不愿见到的大片空白出现
同时，在实施诸如媒体查询，针对不同分辨率优化样式这样的响应式策略时，流动布局能使这些策略更容易实现。由于没有那么多的问题需要修复，所以需要写的css也相当较少。但是，单独使用流动布局这一种方法依然不足以保证所有元素在从手机到电视机等一系列设备上都能保持良好的效果。因为有些文本的行宽在大屏幕上看起来会太宽，而在小屏幕上又看起来太窄。
3）弹式布局
弹性布局与流动布局类似，只是他们的度量单位不同，通常情况下，在弹性布局中会以em来作为单位。1em相当于当前字体的大小，例如，如果body的字体大小是16px,那么1em就等于16px，同理2em就是32px
弹性布局为设计师们在排版方面提供了强大的控制权，理想的阅读文本的行宽介于45到70的字符之间，利用弹性布局，你可以将容器的宽度设定为55em,这样就可以使容器维持在一个合适的宽度了
弹性布局带来的另外一个好处是随着用户增大或者减小字体，使用弹性布局的元素的宽度也会等比例变化，我们会在后面讨论字体大小时进一步讨论这个问题
但是，弹性布局中也可能出现令人讨厌的水平滚动条，如果你把字体大小设置为16px，并把容器宽度设置为55em，那么就会在任何宽度小于880px的屏幕中出现水平滚动条，弹性布局中的这个问题甚至比固定布局的情况还要有更多的不确定性
4）混合布局
假设你有一个300px宽的广告区域，你可以将防止广告的边栏指定为固定的300px宽，其余宽度则以百分比为单位。如果把边栏设置为300px宽，把主要内容栏设置为70%,那么屏幕宽度小于1000px时，还是会遇到水平滚动条的问题
问：那种布局是最具响应性的
从根本上来说，这取决于你特定的项目，因为每一种方法都有其优势和不足
大多数情况下，最佳答案是更具灵活性的哪几种布局：流动布局，弹性布局或者混合布局。因为相对固定布局，它们对未来更加友好
虽然能够通过使用媒介查询来在几个固定布局之间来回切换，但这样做仍旧存在限制，因为使用一个这样的”可切换“的固定布局，会使得你的站点在某几个特定分辨率的屏幕显得非常好，但在这几个值之间过度的那些分辨率的屏幕中救护i显得比较尴尬，这样一来，用户就会受到你的决定的支配
字体大小
字体大小就三种，像素，em,还有百分比
像素：
对于初学者来言，虽然使用像素作为字体大小单位时不需要考虑级联--父元素的字体大小对子元素没有影响，但这也意味着当你想让某些文本以不同的大小显示时就需要对它们逐一设置，这对于维护来说非常不利，因为当你想增大所有字体时，你就不得不去逐一修改每一个值，更重要是，以像素为单位的字体存在着潜在的可访问性问题，所有主流浏览器都允许用户放大或缩小页面，浏览器对该操作通常有哦两种实现方式。
第一种实现方式是简单地将页面上所有东西都放大，页面上其他元素则保持不变长期以来这都是常见的浏览器实现方式，并且现在仍有一些浏览器采用这种方式实现缩放功能
另外一种方式是浏览器只调整字体大小，页面上其他元素则保持不变，长期以来这都是常见的浏览器实现方式，并且现在仍有一些浏览器采用这种方式实现缩放功能
用像素制定字体大小依然不是一种对未来特别友好的方式，由于不同的设备有着不同的屏幕大小和像素密度，因此以像素为单位的字体也许在这台设备上 看起来不错，但在另一台设备上看起来也许就会要么太大，要么太小，使用像素作为字体大小的单位，是与web的灵活性原则背道而驰的做法
em
使用em作为字体大小的单位是一种更加流行，更具灵活性的方法，1em等于默认的字体大小，如果内容字体大小是16px,那么1em=16px；
em也是可以跨浏览器进行缩放的，而且他们也是级联的，从简化维护的角度来看这是好事，因为这样相对地制定元素的字体大小，意味着你只需要调整初始化时的基准，其余部分就会自动地调整，而且是按照比例调整的。
百分比
和以em为单位的字体一样，以百分比为单位的字体也是可缩放的，而且也是级联的，与em类似的是，如果基准字体大小是16px的话，那么100%相当于16px,200%就是32px
虽然从理论上讲，百分比和em没有太大的区别，而且em逐渐成为了web中更受欢迎的字体度量单位，但其实这其中并没有什么技术上的原因。只有当出于em直接与文本大小相关的考虑时，使用em才更有意义。然而以em为单位的基准字体时忽悠问题，ie会夸大实际应当调整的字体大小，假设基准字体设置为1em，并且将h1设置为2em，其他浏览器没有什么问题，在ie中会变得更大，解决这个问题，就可以使用百分比来绕过这个问题
rem：
rem与em的区别在于，rem大小与根元素--html元素有关，使用rem可以避免发生在嵌套中的级联问题。，但对于rem,,仅仅支持ie9以上的。
那种单位是最具相应性的
使用em不但可以使文字能够缩放，而且维护起来也更加容易，如果你要将整个站点的字体都增大，那么只需简单地修改body上字体的百分比即可，如果使用rem,由于需要有像素声明作为补充，所以你还要更新所有的像素值。一般都以百分比作为body元素字体大小的单位，而以em来作为其他元素的单位
2.3网格布局====
结束语：
大多数情况下，流动布局（以百分比为单位，因而可以根据屏幕大小来调整自身的布局）是你设计站点时的最佳选择，当宽度被字体大小啊限制时，你可以使用弹性布局；当宽度被百分比限制时，你可以使用流动布局。
采用更加灵活的方式来制定文字大小可以使维护工作变得更加容易，同时这样做也提升了站点的可访问性，为了达到这个目标，我们就要坚持使用百分比和em。
通过使用css表格，你可以很容易地将固定宽度与流动宽度结合使用，现代浏览器对此特性有着极为出色的支持，而且你还可以使用条件注释来为ie7及以下版本的ie浏览器提供备用样式
三。媒介查询
通过视口元标签，我们可以控制页面在很多设备上的大小和布局视口
视口标签的形式非常简单，只需要指定使用的视口元标签，需要放在head标签中
属性介绍：
1.width:声明可以让你将视口设置为某一特定的宽度，或设置为设备屏幕的宽度.
在width声明中使用device-width是最佳的选择，因为设置之后，页面在屏幕上的布局视口将等于设备的屏幕宽度--设备像素
2.height:允许你指定一个特定的高度,布局视口的高度等于屏幕的高度，一般不会用到height，因为height唯一让人觉得有用的时候，是在你不想让页面垂直滚动的时候。
3.user-scalable,声明浏览器，是否允许用户在页面上进行缩放,默认值是yes.为什么会设置因为ios方向漏洞，如果你把视口设置为任意大小并且允许用户缩放页面的话，那么当你将设备横屏之后，页面会自动变大，这会迫使用户不得不点击屏幕两次来使页面得到正确的缩放，从而避免页面被剪裁，如果禁用了缩放，这问题就不存在了，在ios6之后这个问题就修复了。
4.initial-scale,可以通过给initial-scale赋值为0.1（10%）到10.0（1000%）之间的某个数来设置页面初始化时的缩放层级，正常我们设置为百分比缩放
5.maximum-scale声明可以告诉浏览器允许用户放大页面到什么程度，在移动端的safari,其默认值是1.6，数值也是在0.1到10.0之间，如果你设置为1.0,那么你同样禁用了用户缩放页面，这样做也同样会降低站点的可访问性。
6.minimum-scale声明会告知浏览器允许用户将页面缩小到什么程度，在移动端safari,其默认值是0.25.，如果值设置为1.0，也同意运行禁止用户缩小页面。
修复视口问题，事实证明视口元表情实际上不规范的，通过看W3C的文档，提供了@viewport规则，css设备适配，@viewport规则可以让你在css中直接使用视口元标签
@viewport{width:device-width;},但是该语法仅仅支持opera和ie10
媒介查询:四个基本组成部分：媒介类型，媒介表达式，逻辑关键词，规则
媒介表达式：@media screen and (min-width:32px){}
媒体查询设计从桌面端向下设计，从移动端向上设计
使用em为媒介查询增加灵活性，在以em作为单位之后，即使站点被放大了，媒介查询能够生效，并保证布局仍旧是优化过的
响应式多媒体
有选择的为手机提供图片
自定义数据属性：专门为页面存储自定义数据并具有data-前缀的属性，通常出于脚本编程的目的而设置
响应式图片的实现方法：Sencha.io Src是最近似于即插即用型的响应式图片的解决方案，它以你的图片作为输入，并返回缩放后的图片，你只需要在你的图片资源前面加上Sencha.io Src的链接即可，会使用发起请求的设备的用户代理字符串来计算出设备屏幕的大小，然后根据该数值来缩放图片。默认情况下，它会将图片缩放到设备宽度的100%。。
优势是：会缓存请求，这样便不用在每次加载页面时都要生成一次图片。