今天完成的事情：

1.继续css任务8

2.学习媒体查询

3.学习自适应布局

明天计划的事情：

1.继续css任务8

2.对css任务8使用媒体查询

遇到的问题：

暂无

收获：

1.响应式布局

        1）什么是响应式布局

              响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

         2）工作原理

               为了应用响应式 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

        3）布置步骤

              （1）布局及设置meta标签

           （2）通过媒体查询来设置样式media query

           （3）设置多种视图宽度

                    假如我们要兼容ipad和iphone视图，我们可以这样设置：

                    /**ipad**/

                   @media only screen and (min-width:768px)and(max-width:1024px){}

                   /**iphone**/   

                   @media only screen and (width:320px)and (width:768px){}

           （4）字体设置

                    到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

                    css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。