今天完成的事

1.学习媒体查询的相关知识

2.今晚一直看书

后面一直在看别人的教程如何实现折叠式导航栏 并尝试理解

明天的计划

1.完善移动界面下的导航栏样式

2.完善第三部分最后一个方块的样式

遇到的问题

1.一个元素最多可以使用几个伪元素？

如果使用伪元素实现 的效果是不是只能三个伪元素构成三个横杠然后边框包围

2.假如使用bootstrap的折叠导航栏 那媒体查询是不是也可以用在其他地方

比如字体大小 元素宽度等等

今天的收获

阅读《高级web标准解决方案》第八章响应式web设计与CSS

1.媒体查询

媒体查询相当于其他编程语言里的if语句（如果条件为真，就执行代码） 媒体查询使用的@media规则与supports相似，都是CSS中的“if”语句。

针对的是显示网页环境的能力。

达到媒体查询触发条件的特定视口宽度值，叫做断点。

2.浏览器视口

1）视口就是浏览器显示网页的矩形区域。

CSS像素值与实际的硬件箱数的比例系数视设备屏幕的分辨率不同而不同

2）默认视口是硬性呈现桌面大小的视口（模拟一个大约1000像素宽的视口），在其中显示缩小后的页面。

3）理想视口与设备自身尺寸相近。对于一般手机而言，大约为300-500像素，对于平板而言，大约为800-1400像素。（像素指CSS像素）

4）可见视口就是直接可以看见的显示网页的矩形区域。

5）约束整个页面的虚拟的矩形区域，称为布局视口。

3.配置视口

让不同默认视口的设备使用理想视口。需要在页面头部添加

<meta name="viewport" content="width=device-width  initial-scale=1>

4.媒体类型与媒体查询

1）媒体类型 依据设备能力来分离样式。针对特定的环境应用样式。

可以在link元素添加media属性来指定在哪些设备上应用相关样式

也可以在CSS文件中指定，采用@media语法 

@media print {

     .smallprint{

                    font-size:11pt 

                         }

                         }

2.媒体查询 指定媒体类型加指定媒体条件 两种方式 建议使用后一种

在link中添加 media="screen and (min - width :600px)"

在css中使用

@media screen and (min-width :600px) {

        widht: 100%

           }

竖向屏幕指定

 @media (orientation: portrait {

    /*竖向屏幕时的样式*/

}