65.尚硅谷_css3_响应式布局核心-CSS3媒体查询选择器.wmv原创

我们来看一看，好，那现在是不是讲完这个C3的媒体三学下是不是，那我们再来看，OK，那看什么呢？现在我们讲完了媒体类型跟媒体属性，我们来讲一下它里面的关键字啊，其实我们刚刚已经接触到一个关键字叫什么。N的关键词是不是OK？来看一下其他关键词。好的。好，关键字这一块啊，这个分概念好，关键字好，我们学的第一个就是什么N的什么代表，N代表什么意思啊代表。雨的意思。一般用来连接什么呢？

来看一下这边我们用N连接什么媒体类型和媒体。属性，比如说你这个N前后可以跟媒体类型，或者跟媒体属性懂不懂，OK，那我这边能不能再去写个end end什么你的什么we。Kit干什么？D、没有。刚点完。P是什么？RAOK来看这个东西，它为它得为二的时候，我才能起作吧，这是两个什么与的关系吧，首先你的像数对得为二，其次你得是一个横平。是吧，来看一下教你只要我是竖屏那就不行，F10你看我把它干过来，只要是竖屏那不行，IONE5竖屏不行，IONE4竖屏不行，IONE6竖屏不行，IPHONE6PLUS竖屏也不行吗？是不是？那OK，调整横屏，那IONE6PLUS像素像素比是不三啊，我说你的像素比必须是二，而且得是个分平方，那怎么办？换成FONE6，你看像素比为二，而且得是个分比，就是起作用。

怎么讲，说这个N代表什么意思啊。与的意思，一般用来连接媒体类型啊，这叫媒体类型或者媒体啊属性能不能理解啊，这应该不难，是不是OK，还有一个关键字是绝大多开发者他们所不知道的啊，你们需要知道的对不对？Only代表什么意思？来看看好现是一个only OK，我们来说啊，Only是不是代表仅仅啊，只有啊，是不是，大家想想only一般写写在哪，一般写在面块后面懂吗？写这个位置，它代表什么意思，指示屏幕啊。

个O链只会影响他什么，紧跟着这个媒体啊，类型说明这条规则只能在屏幕上面去做显示吧。那跟我不写是不是一样的？好像没有任何意义啊，是不是，你看我写O跟我不写O点是不是干嘛差不多的，哎，我这个要来说说找你。数下这姑娘，嗯，把这个规则求。好，我们说为什么必须你要去这边去写一个，好这个跟浏览器的兼容性用法。和浏览器兼容性有关，好，这是一个什么样意思？OK，我们说老版本的浏览器OK，只支持媒体类型，不支持但。

每一体属性的查询什么意思啊，就是说在老版本里面。好，这里这个是待我稍微写写面积杠。Wise。WD是不是美YY800PX老版本里面它只认什么啊，如果你这么写，如果你没有加O俩。他只会读第一个单词，读里面的快乐，后面的第一个单词啊，说在老版本底下，其实你这个选择性在老版里面就是长这样的。而且老版本是支持。媒体类型的，也就是说这里面的钥匙会不会被运，被用到，会被用到，可是这是我们所希望的吗？我们是代。条件的，这个条件他是不认的，说老版本的行为跟我新版本一样吗。

不一样，为了避免这种情况，你必须给我加一个，我这个时候你只要加到我俩在老版本的眼里，他长什么样。什么？我有这种设备吗？没有，那老版本会忽略你里面的规则。懂不懂，能不能理解啊，OK，那在新版本眼里，因为这个O它是认的嘛，整个整条加式都是可以干嘛解析的，也就是说我们说加这个O是为了解决浏览器的一个交接问题吗？懂不懂你不加O，我们说老版本的浏览器会干嘛？会比如说比如说我本来这个样式是你大于等于800我才能用的吧，在老版本你如果不加红脸干嘛，只要你是彩色屏幕我就用了。懂不懂那规则就不一样了吗？是不是一旦你加了失效就失效，老板们就不要用，不要干嘛不要用，用这些样式啊，也就是他是他就没有想没有响应成功的。

两讲啊，所以说一定要加only量哦，我建议大家去写的时候必须加O，懂吗？因为only只对这个媒体类型产生作用啊。懂吗？OK，这你所以叫什么？Only是用来解决浏览器这些问题的。好，那再来看还有什么，是不是有end only是不是一定会想到货啊？是不是切记里面没有我只有逗号，逗号就代表我这个，这个能不能讲OK好，我们说N是代表的一条规则，整整一条规则吧，是不是on代表两条。什么意思？比如说我来写写CTRLC，还是这个OK，我把这个and换成逗号，相当于什么意思，你前面你自己玩这这逗号前后这两条没有任何人啊。

联系代表或的意思懂不懂，那什么意思啊，这边其实用的是默认值or。相当于这个意思，这能不能讲说明是一个什么样的意思啊，就是说你的像素比为二的手机就能用，或者说你是。横屏的彩色屏幕。懂吗？这是一个维度的概念，这是一个维度的概念，懂不懂，因为我没有写媒体类型，相当于媒体类型就是。哦。能不能记住啊？OK，那我们来看看中你好，大家想想现在为什么能满足。你是横屏吗？是不是？那我干嘛让你变成竖屏？现在为什么能满足你像素比为二吗？是，是，你看我一旦像素变成三。满足吗？首先你是不是横平的，不是你的像素比是不是啊，不是，那我就不满足，只要你满足这里面的任何一个条件就可以，对不对？这个end不一样，End是不是只代表一条规则？

是不是这里面有几条规则？两条，这是一条横屏的彩色屏幕，还有呢，像素比为二的所有设备。懂不懂我的意思啊，OK，那最后一个关键词好。什么not代表什么？取反的意思？这应该比较。好说这是什么，代表什么？获利子OK区分吧，那我这个应该怎么写好？诺特的位置跟物差不多。懂吗？好，OK，走你。Note OK，只要你不是横屏的彩色屏幕，或者说你的像素比就可以。

是不是，那这个时候大家想想，是不是只有相除比二的时机才能用，你看诶这个为什么能用，只要你不是横横屏的什么。彩测屏幕啊，我现在是一个竖屏的彩色屏幕啊，是不是这条是不是干嘛满。满足了，他能不能讲，那么你这个时候我写的note还需要only吗？还需要在前面加个only吗？我说你如果这边我是都得加only，这个时候还需要加only吗？不需要，你有note了，懂不懂也没有note这种设备的。能理解吗？OK，这是一般很多开发者说不知道的，懂不懂，OK，那到这一块我们把关键词也讲完了，懂不懂？媒体很简单，这样东西媒体类型，媒体属性，关键是。搞清楚这三个媒体查询就差不多了，你不讲好，今天把这些基础点过一过，明天我会带你们看一个特别牛牛的一个东西，我们来看，不是消费的源码。

他的源码里面。三格。来看一下。呃，他的身格在哪？嗯，不知道的源码在哪，我找的源码。Double里面有一个。找不到源码，是不是找work？OK，你看这是不是什么3.3.7吧，看他的源码，他的源码里面是不是有一块叫做里面大家看，我给你们去找一找，找一个，比如说它的一个三格系统。三格系统。嗯，这是它的变量啊，给你们找个三个系统在那边。啊，不是他。嗯，三个大看，OK，你看这里面是大量使用了媒体三角是吧，说明天我们会从源码的角度，结合less跟我们今天讲的响应式来看一下BOO drop是怎么去完成它的三个系统的。

能不理讲OK好，那所以说这个响应式这个东西必须干嘛，里面这个基础点给他搞清楚，下午讲的less你要懂，懂不懂，不然明天的课你是啊没法听到，OK好，大家先下课先。