今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。

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

响应式中的一些术语可能并不是新的，而其他术语又跟自适应或是移动有点像。那么你也许会困惑，他们之间的区别到底是什么?

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

另一方面，移动设备，通常意味着需要为移动用户，专门搭建一个移动网站。然而这样做可能有些作用，却不是很好的主意。移动网站要求必须非常轻巧，然而他又很依赖一个新的代码库和浏览器的嗅探。所有的这些都是摆在开发者和用户面前的一个障碍。

布局方式：

第一部分，流式布局

就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。这些相对长度多用于网格，诸如宽度，间距或是留白等属性。

流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。                       

仅靠灵活的布局方法是不够的。有时浏览器视口的宽度可能很小，甚至按比例缩放布局也会产生太小而无法有效显示内容的列。具体地说，当布局太小或太大时，文本可能变得难以辨认并且布局可能开始破坏。在这种情况下，媒体查询可用于帮助建立更好的体验。

第二部分，媒体查询

媒体查询是作为目标和包含样式时常见的媒体类型的扩展而构建的。媒体查询提供了为各个浏览器和设备环境指定不同样式的功能，例如视口宽度或设备方向。能够应用独特的目标样式开辟了一个机会的世界，并利用响应式网页设计。

初始化媒体查询

使用媒体查询有两种不同的方法，使用@media现有样式表中的规则，使用规则导入新样式表@import，或链接到HTML文档中的单独样式表。一般来说，建议@media在现有样式表中使用规则以避免任何其他HTTP请求。

html：

<!-- Separate CSS File -->

<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

css：

/* @media Rule */

@media all and (max-width: 1024px) {...}

/* @import Rule */

@import url(styles.css) all and (max-width: 1024px) {...}

媒体类型之后的媒体查询表达式可以包括不同的媒体特征和值，然后将其分配为真或假。当媒体要素和值分配为true时，将应用样式。如果媒体功能和值分配为false，则忽略样式。

媒体查询

@media all and (max-width: 420px) {

  section, aside {

    float: none;

    width: auto;

  }

}

移动优先

@media all and (min-width: 420px) {

  .container {

    max-width: 538px;

  }

  section {

    float: left;

    width: 63.197026%;

  }

  aside {

    float: right;

    width: 29.3680297%;

  }

}

请注意，这与以前的代码量相同。这里唯一的例外是移动设备只需要渲染一个 CSS声明。所有其他样式都是延迟的，只加载在较大的视口上，并且不会覆盖任何初始样式。

媒体查询

@media

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media的值

max-width        定义输出设备中的页面最大可见区域宽度。

min-width        定义输出设备中的页面最小可见区域宽度。

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

看了一下sass和less的区别，明天准备安装sass。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

什么是Sass和Less？

Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？

       CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

       转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

Less——以及Sass对于这个功能，远不止这些。

LESS和Sass在语法上有些共性，

比如下面的这些：

1）混合（Mixins）：class中的class;

其主要意思是将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性。

2）参数混合（Parametric）：可以像函数一样传递参数的class;

带参数混合，像函数一样在class A中定义一个参数的默认值、或者参数属性集合，还可以是@arguments蛮量，然后将定义好的class A引入class B中

3）嵌套规则（Nested Rules）：class中嵌套class，从而减少重复的代码；一个选择器中嵌套另一个选择器来实现继承

4）运算（Operations）：css中的数学计算；

在CSS中使用加、减、乘、除进行数学运算，主要运用于属性值和颜色的运算，可以轻松实现属性值之间的复杂关系。

5）颜色功能（Color function）：可以编辑你的颜色；

6）命名空间（Namespaces）：样式分组，从而方便被调用；

，将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用；

7）作用域（Scope）：局部修改样式；

8）JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值。

明天计划的事情：（一定要写非常细致的内容） 

做任务八第二个页面，以及完成任务八的第一个页面的自响应
遇到的问题：（遇到什么困难，怎么解决的）

 做流程图的时候箭头对不齐，使用的代码都是一样的，宽度也是一样的。
收获：（通过今天的学习，学到了什么知识）

了解了自响应。