今天完成的任务

a.任务8第二个页面的完成

b.媒体查询的学习

c.拓展知识

明天的计划

a.任务8第三个页面的制作

b.拓展知识

遇到的问题

a.在写代码的时候，有时候在html写了类名之后，css给予类名属性，然后发现并没有实现，类名也没有写错，但是把class=""重写一次，就又可以加载到了，是什么地方出了问题吗？

b.在套路导航页进行样式修改的时候，遇到了很多揪心的事情，因为导航的类是bootstarp写好的样式，所以在修改赋予属性的时候得加上一个类名进行覆盖，花了较长时间，并且！重点，在覆盖类名时，优先级不够，在怎么写覆盖，他都不是优先选的，我选的解决方法是给它加上！important强调重要性，因为要改的样式比较多，所以这个用的也比较多，不知道会不会有什么隐患。大佬如果有更好的方法求告知。

c.使用栅格式container的时候，发现了一个问题：就是栅格式样式使用了之后，每行的最高值只有1170px不能更宽了，因为它的样式有一个

@media (min-width: 1200px)

.container {

    width: 1170px;

}

这样就很蛋疼，这个媒体查询属性又不能好覆盖，或者我写一个

@media (min-width: 1400px)

.container {

    width: 1380px;

}

这个代码然后给加上去？跪求解惑!!!

d.今天在hove的时候遇到一个问题：就是我设置了一个button的按钮，下面有一个div的图形和一段文子，要进行hove效果，然后我写了

然后我发现点击图形的时候文字会跟着有hove效果，但是点文字的时候图形却带上不上这个hove效果。解决代码是改一下按钮的hove代码

然后就有了按图形文字也跟着hove的效果，但是原理不太懂，网上也没找到具体资料。

收获

今天主要学的是媒体查询

所谓的媒体查询就是指，不同的条件使用不同的样式或样式集合。

注意的几个问题：

1.device-width 和 width的区别： device-width表示的是设备的宽度，即屏幕的宽度。width所代表的是文档宽度，与屏幕大小没有关系，如果是在移动设备上，width表示的是布局视口的宽度。

2.必要的空格。

//空格是有必要的，在某些情况下该样式永远不起作用。

<link rel="stylesheet" media="(min-device-width:400px)【空格】and【空格】(max-device-width:900px)" href="css/style1.css">

媒体查询的语法

<!-- link元素中的CSS媒体查询 -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->

<style>

@media (max-width: 600px) {

    .facet_sidebar {

    display: none;

  }

}

</style>

当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false，<link> 标签指向的样式表也将会被下载(但是它们不会被应用)。

逻辑操作

and，且的关系，当所有的条件满足的时候返回true

//一个基本的媒体查询，即一个媒体属性和默认指定的all媒体类型

@media (min-width:700px){}

//如果你只想再横屏时候应用,你可以使用and操作符合并媒体属性

(min-width:700px)and(orientation:landscape){}

//如果你仅想在电视媒体上应用

@media tv and (min-width:700px) and (orientation:landscape){}

逗号分割列表，或的关系，只要有条件满足就返回ture

//如果你想在最小宽度为700像素或者横屏的手持设备上应用

not，类似于取反，最后参与运算的运算符

only，only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式 

媒体类型 

ll 用于所有设备

aural 已废弃。用于语音和声音合成器

braille 已废弃。 应用于盲文触摸式反馈设备

embossed 已废弃。 用于打印的盲人印刷设备

handheld 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话

print 用于打印机和打印预览

projection 已废弃。 用于投影设备

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

tty 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备

tv 已废弃。 用于电视和网络电视

媒体特征

常用的媒体特征

1.颜色color,指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。

//向所有能显示颜色的设备应用样式表：

@media all and (color) { ... }

//向每个颜色单元至少有4个比特的设备应用样式表：

@media all and (min-color: 4) { ... }

2.颜色索引，color-index,指定了输出设备中颜色查询表中的条目数量。

//向所有使用索引颜色的设备应用样式表，你可以这么做：

@media all and (color-index) { ... }

//向所有使用至少256个索引颜色的设备应用样式表：

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

@media (min-width:700px),handheld and (orientation:lanscape){}

3.宽高比（aspect-ratio） 描述了输出设备目标显示区域(渲染或文档)的宽高比,该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

//这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。

@media screen and (min-aspect-ratio: 1/1) { ... }

4.设备宽高比，device-aspect-ratio,描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

//宽高比或者16：9或者16：10。

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

5.设备高度/宽度，device-width/device-height 描述了输出设备的宽度/高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

//向显示在最大宽度800px的屏幕上的文档应用样式表

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

6.宽/高 width/height 媒体属性描述了输出设备渲染区域（如可视区域的宽高或打印机纸盒的宽高）的宽高

7.方向 orientation 值 landscape | portrait ，指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式

//向竖屏设备应用样式表

@media all and (orientation: portrait) { ... }

8.分辨率 resolution指定输出设备的分辨率（像素密度）

//为每英寸至多300点的打印机应用样式：

@media print and (min-resolution: 300dpi) { ... }

//替换老旧的 (min-device-pixel-ratio: 2) 语法：

@media screen and (min-resolution: 2dppx) { ... }

CSS3 @media的两种工作方式：

一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

上面的意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

在media属性里：

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

上边的意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在

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

  .class {

    background: #ccc;

  }

}

写法是前面加@media，其它跟link里的media属性相同

其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

媒体功能

值 和 描述

aspect-ratio    定义输出设备中的页面可见区域宽度与高度的比率

color   定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-height   定义输出设备的屏幕可见高度。

device-width    定义输出设备的屏幕可见宽度。

grid    用来查询输出设备是否使用栅格或点阵。

height  定义输出设备中的页面可见区域高度。

max-aspect-ratio    定义输出设备的屏幕可见宽度与高度的最大比率。

max-color   定义输出设备每一组彩色原件的最大个数。

max-color-index 定义在输出设备的彩色查询表中的最大条目数。

max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-device-height   定义输出设备的屏幕可见的最大高度。

max-device-width    定义输出设备的屏幕最大可见宽度。

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

max-monochrome  定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。

max-resolution  定义设备的最大分辨率。

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

min-aspect-ratio    定义输出设备中的页面可见区域宽度与高度的最小比率。

min-color   定义输出设备每一组彩色原件的最小个数。

min-color-index 定义在输出设备的彩色查询表中的最小条目数。

min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。

min-device-width    定义输出设备的屏幕最小可见宽度。

min-device-height   定义输出设备的屏幕的最小可见高度。

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

min-monochrome  定义在一个单色框架缓冲区中每像素包含的最小单色原件个数

min-resolution  定义设备的最小分辨率。

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

monochrome  定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0

orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。

resolution  定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

scan    定义电视类设备的扫描工序。

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