今天完成的任务

a.任务9完成

b.深度思考

d.拓展知识

遇到的问题

a.基本没有什么大问题，因为我任务8结束的时候已经开始着手做媒体查询自适应了。总的来只有一点小问题，第一个就是网页第一页的链接text里，要给它做响应式，所以我采用的是10列-5列-4列-1列(不做3列和2列的原因是：做3列因为总体有20个标签，这样的话不能除开，最后一排会留余2个空隙。不做2列的原因是因为li列表如果文字center的话，标点和文字会离开间隔太多，所以我用的是padding来做居中效果，这样的话宽度如果继续减少50px左右就直接打乱布局了，加上2列已经是用的col-xs了，再设置一个@media有点繁琐：纯碎只为了偷懒。 所以直接设置了col-xs-12作为1列了）

明天的计划

a.任务10的环境配置

b.任务9的总结

c.拓展知识

收获

响应式设计概述

 流式布局

 媒体查询

 移动第一

 流式媒体

响应式设计是一个网站搭建的实践尝试，他使得每种设备和屏幕尺寸都能很好的工作，而不论是大屏还是小屏，手机或是pc。响应式设计关注于提供每个人一个直观的感受和满足。使得pc和手机用户都能够从中受益。

响应式、自适应、移动的区别

响应式和自适应的关系很密切，经常二者是互通的。响应式通常意味着对待任何变化，反应更积极更快。而自适应往往是应对一个新需求或是情况的被动反应，例如变化。响应式设计应对不同因素的变化，都会很流畅自如，例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化，提供一个完美功能模式的网站。

流式布局

响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。第一部分，流式布局，就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。这些相对长度多用于网格，诸如宽度，间距或是留白等属性。

流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。网站布局需要适应这种变化，而固定单位有太多的限制。幸运的是，Ethan指出用一个简单的公式，就可以在流式布局中使用相对值。

公式是用目标元素的宽度除以他父元素的宽度，结果就是目标元素的相对宽度：

target ÷ context = result

灵活网格

使用网格公式我们可以把固定长度换算成相对单位长度。这个例子中我们将使用百分比，他跟em有相同的效果。注意，不管容器变的多宽，section和aside之间的间距和宽度都会按照比例变化。著作权归作者所有。

采用流式布局概念和公式，把他们运用到网格的所有部分，就可以创建一个完全动态的网站了，它可以适应各种尺寸的设备。为了更好的控制流式布局，你也可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。

仅仅有流式布局是不够的。有时浏览器的显示窗口宽度可能很小，以至于按照缩放比例得到的布局，创建出来的列太小不能有效的显示内容。具体说，就是当布局太小或是太大，内容可能难以辨认，布局也可能遭到破坏。在这种情况下，媒体查询就用来辅助建立一个更好的用户体验。

媒体查询

媒体查询是对媒体类型的一个扩展，因为经常发现目标设备自带样式，他为特定的浏览器和设备提供特殊的样式。能够为目标设备提供有针对性的样式，在响应式设计中发挥作用。

初始化媒体查询

有好几种方式使用媒体查询，在现有样式表中使用@media规则，或是在一个新样式表里使用@import规则，或是用link标签给html文档引用一个单独的样式表。通常推荐在现有样式表中使用@media规则，以避免多次发送http请求：

每个媒体查询可以包含一个或多个媒体类型。常见的媒体类型有所有(all)，屏幕（screen），打印（print），电视（tv）和盲文（braille）。Html5中又添加了新的媒体类型，甚至包含3d眼镜（3d-glasses）。一个没有特别声明媒体类型的媒体查询，默认媒体类型是屏幕（screen）。

媒体查询表达式可能包含不同的媒体属性和属性值，然后分配是真还是假。当一个媒体属性和值都为真时，应用样式，否则忽略样式。

媒体查询中的逻辑运算符

媒体查询中的逻辑运算符，帮助建立强大的表达式。在媒体查询中有三个不同的逻辑运算符，分别是与(and)，非（not）和唯一（only）。

and: 在媒体查询中使用与逻辑运算符，容许添加额外的条件，以确保浏览器或是设备同时满足a，b，c条件等等。多个媒体查询可以用逗号分开，作为一个筛选条件。

not:在查询中的非逻辑运算符，表示除了满足查询条件设备的所有设备都适用。

only：唯一的逻辑运算符是一个新运算符，不识别html4算法的用户代理，所以隐藏设备或是浏览器不支持的媒体查询样式。

忽略一个媒体类型

当同时使用非和唯一逻辑运算符，媒体类型就会失效，这种情况下媒体类型是默认的所有设备。

移动第一

使用媒体查询中的一个先进技术，就是移动优先。移动优先方法是指，先在小视窗加载网站默认样式，然后再添加用媒体查询设置的视窗样式。

移动优先背后的操作理念就是，一个移动设备的用户，通常使用小视窗的设备，不应该加载pc机上面的所有样式，之后又加载为移动设备写的样式。如此一来浪费了带宽，而带宽对于任何搜索漂亮网站的用户来说，都是很宝贵的。

移动优先方法也提出为移动用户设置一定的限制。在不久的将来，大多数的网络消费将在移动设备上进行。所以理应为他们设计相应的移动体验。

流式媒体

最后，流式的媒体对于响应式设计也是同等重要的部分。当视窗开始改变尺寸时，媒体大小并不总是做适当改变的。所以图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。

通过使用最大宽度值为100%，是一个快速实现媒体按照比例缩放的方法。这样做可以确保在视窗变小的情况下，任何媒体可以根据他的容器宽度，按照比例缩放 。

响应式页面的优点

1.跨平台。   在手机，pad，电脑上均有不俗的表现。

2.节省人力开发成本。   不再需要有人特地维护PC页面，移动页面。

3.表现力一致   在不同的平台上看到的东西都是基本一致的，会让感觉体验良好。

响应式页面的缺点

1.自由度太低，局限性较大。    你需要考虑在手机，pad，PC上三种屏幕下的页面内元素的呈现，会导致有着非常大的局限，比如说我在PC上是横向滑动的通栏图，但是在手机和pad就是不用的。所以，你就只能用一张单一的图或者一组静态图来表达。

2.页面会比较大，在当前国内渣渣2G，3G网络下打开速度会比较慢。   由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC/pad的冗余代码，其实毫无意义，而且浪费了流量资源。

3.对于非webkit内核的浏览器支持极差(IE6,7,8等就直接悲剧了)。   对于非webkit内核的浏览器，比如说Windows Phone手机上用的IE浏览器，完全就悲剧了，彻底看不了。不过还好，现在的IOS，Android都是webkit内核，至少在80%以上的手机上可以有良好的呈现。

栅格式列偏移

通过col-md-offset-*(其中星号代表移动的列组合数)来实现

栅格式列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push（右）-*”和“col-md-pull（左）-*” (其中星号代表移动的列组合数)实现列的向左或向右排序