今天完成的事情：做任务9，查看学习资料——《媒体查询——响应式设计》，为页面添加媒体查询的代码，以达到响应式的目的，检查代码。

明天计划的事情：继续完成任务9，对任务9的代码进行检查。

遇到的问题：页面3左边的列表设置媒体查询时没办法让它里面的字居中左对齐，在网上搜了资料，让li居中，让里面的文字左对齐，但是做了，没有效果。明天准备再看一下，在li里放一个div，让li居中，div左对齐，不知道能不能实现。

收获：设置隐藏的方法：1、使用display：none;来隐藏所有信息（无空白位占据）

                                      2、使用overflow：hidden;来隐藏溢出的文字或图片

                                      3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否

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

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

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

媒体查询中的逻辑运算符

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

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

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

媒体特性中的宽高

最常见的一种媒体特性围绕设备或浏览器视窗的宽高。这些尺寸可以使用媒体特性中的height，width，device-height和 device-width获取到，并且这些特性均可以用min或max作为前缀，建立例如min-width 或 max-device-width的特性。

使用最大最小前缀

最大最小前缀在媒体特性中有相当多的地方使用。最小前缀表示一个值大于或是等于，而最大前缀表示一个值小于或是等于。使用最大最小前缀避免与html普通语法冲突，尤其不用使用<和>符号