尚硅谷前端基础 (144)

好，那么刚才我们说的是一个媒体查询的一个基本用法啊，主要说的一个媒体类型，那接下来呢，我们来接着往下说，诶接下来我们来说一个这么一个东西啊，还是媒体查询，媒体查询，媒体查询点一个HDMR，在这我来写个东西啊，还是这一套啊，还是这一套，那接下来我们要说的是一个什么呢？诶叫做一个媒体的一个特性，媒体的一个特性，媒体的一个特性的话，其实主要指的就是什么呢？主要指的就是我们这个东西啊，它就不是在说你的媒体类型了，对吧？那基本上你写媒体特性的时候就已经明确你的媒体类型了，那基本上这些特性都是什么呀？都是对这个，呃，这个屏幕类类型的，哎，比如说我们有一个叫什么呢？诶，这有一个叫做wise，哎，这有一个叫做什么呢？叫做he，哎，Wise he什么意思，哎，这个表什么呢？表示你看写了wise of the viewpo he of the viewpo什么意思。

表示的就是我们视口的宽，宽度和高度啊宽度和高度，那所以有些时候干嘛呢？诶我们来说一下，那我们来说两个，这叫一个Y，诶外叫做视口的一个什么呢？视口的一个宽度，我们的he表示什么呢？诶表示的是一个视口的一个高度，那也就是说我可以根据我视口的宽度和高度不同，是不是来给我们的诶网页来设置样式啊哎，那这块我们要怎么做，那在这儿呢，我们直接写一下，我们直接写一个还是一个at，一个me，那这里边我们可以直接诶写一个诶外，诶比如说外我写什么呢？我写一个500个像素。500个像素外，我们写一个500个像素啊，但是这个整体的话，我们得给它套一个这个括号，我们整体给套一括，那这个就表示的是一个外是一个500个像素，那什么意思？那现在我这里面的样式就表示当我的宽度是500，视口的宽度是500像素的时候，这个时候我的样式就会生效，所以看着啊，我写一个background color background color，我写一个井号BV是我给背景颜色设置这么诶没写什么呀，选择器啊，不要忘了它里边你要写的是完整的语法啊，完整的语法，那这样的效果就是什么意思呢？当我诶500啊PX啊500PX这句话的意思就是当你的视口宽度是500像素的时候，那么我的这个样式叫生效，所以你现在看样式生没生效，诶没生效啊没生效，我们来调整一下试管的宽度在这儿呢，我们啊调成这个响应式设计啊，响应设计在这，我们可以去拖了一下，哎，拖一下。

哎，它这个还是在他这块啊，看的不是特别特特不是特别好，这工具有点小问题是吧，我们来调一下，把它调一下，现在是视口宽度是不是一个六百六百，你看这啊，看看这是不是一个614啊，哎，614，我们就调到500啊，调到500小小小，哎小这个呢，调的时候手不能抖啊，手不能抖得稳当的是吧。

哎，你看现在我这是不是正好调到一个500像素，诶，那这个时候500像素的时候就变成这个颜色，而你比500大或者比500小是不是都变不了啊，哎，都变不了，那那个高度是不是也一样，哎，高度也一样，那这个时候我们其实就可以根据什么呢？我们这个视口的大小来设置我们的这个样式了，但一般情况下我们不管高度，一般情下不管高度，只管什么宽度，一定注意我们在做这个网页的时候，一般情况下高度是多少我们是不管的，我们只管宽度，为什么呢？因为你想一下，无论你是在我们的手机端，还是在我们的这个PC端，我们的网页一般宽度都是固定的，一般都是固定的，它最多它就跟屏幕一边宽可能窄一点，可能比屏幕窄，但是最多就跟屏幕一边宽，我水平方向不会出现滚动条，没有说是横着滚的，我们一般滚动条都是上下去滚的，没有水平方向去滚的，所以这个时候高度就不重要了，因为高度你高了以后我可以出滚动条。

但是你宽了以后，我就不会出滚条了，因为出滚条以后非常难看，或者说什么呢？或者说出现横向滚条，它是有点反人类的啊，所以我们可以出现纵向滚条，不会出现横向冷条，所以我们在做的设计的时候，高度一般不考虑，只考虑的是什么呢？只考虑的是这个宽度，当然这里面会有一些设计的心理学东西，在这儿我们就不过多设计了，但是你只要知道我们在设计的时候是一般只考虑宽度啊，不会考虑高度的，那这个时候就会产生一个问题，什么问题呢？现在的话我这块外是一个500像素，那你想一下我这样式啊，这样式写的就比较缺德了，怎么叫缺德呢？这样什么时候生效啊？当你的宽度是500像素的时候，它会生效，你现在看啊，我调调诶五百一就过了，诶500是不是生效了，诶但是它讨厌在哪呢？你必须得是恰恰就是500多一点也不行，少一点也不行，那我们在这种设计的时候，那意味着我可能叫什么呀？哎，我。

501的时候，我设置一个样式，502的时候设置一个样式，然后499是这个样式，那我说每一个像素，每一个像素设置啊，所以这个时候我们如果要用这种写法的话，那你得累死，你得累死很痛苦对吧，很痛苦，所以我们一般这种东西，我们指定的应该是什么，是不是一个范围啊，哎，比如说哎，你小于500是什么样的是吧？比如说你大于500什么样的，我需要的是一个范围，而不是某一个点，那这样写点的话，那就意味着我们这儿只能是在这个位置，对吧？所以我们一般不用它，我们一般用什么呢？我们一般用的都是我们这个mean外，Mean外，诶我们叫什么呢？诶叫做这个市口的什么呢？视口的一个最大宽度啊，最大宽度还有什么呢？Max外啊max外这个是什么呢？这个是我们视口的一个最小宽度啊，最宽度，所以这儿我们可以换一下，我可以这儿直接换成一个，我们写一个啊，我写一个M啊M那。

这个时候你注意了什么效果啊，看着我还是去改变这创造奖，你看现在干嘛了，你看是不是一直生效啊，诶一直生效，然后当诶当什么你看五百零六五百零三五百，哎你看当什么499的时候，是不是就就没了，哎499时就没了，所以这个面外表示什么意思？最哎我这写反了，写反了max外表示最大啊，面表示最小啊，视口一个最小宽度行吧，所以我这写了一个min外表示视口的最小宽度是500，也就是说我这个样式，只要你的宽度干嘛大于500的时候，是不是生效啊？哎，所以面外表示什么意思，表示我们什么呢？你的视口大于我的这个指定宽度时，它就干嘛就生效啊，你的视口大于指定宽度时生效，所以我写一个M外500表示什么意思呢？只要你的视口比500大，那么OK我就生效，你小了我就不生效，懂意思吧？

这个是我们说一个M外，然后呢，Max外max什么的，Max表示视口的一个最大宽度，你现在看我现在600多生不生效不生效，等我小小小小小，哎，小小小小小到哪了呢？到500的时候。是不是生效了，并且你比500小，它也是什么也是什么效，所以max y表示什么意思呢？表示我们这个视口小于我们这个指定宽度时生效，哎，生效表示就是我们这样式啊，我们这个样式会在视口小于指定宽度声效，所以你这写一个max表示什么意思呢？表示当你的视口小于500像素的时候，我们的这个样式就会生效，所以一般我们用的话，Y hi的基本不用，我们一般就是用min或者max对吧，一般就是用mean或者是max，那这里边就是叫注意了，你像我们现在这种情况啊，比如说我把这住了啊，我要把这注了，把这注了我们写一个啊，我这写一个什么呢？我这写一个mean麦，Mean外写一个500 mean外写一个500，那这个时候是表示我的视口就是大于500，大于500的时候是是不是生效了，哎，大于百时是不是生效，那也就是说现在我们的这个样式的话，在500是一个分界点，500以后是一个样式。

500以上是又是什么呀，另一个样式对吧，那像这种点这种点啊，我们这来说一下我们这个样式切换的一个分界点，分界点。哎，我们什么呢？我们称其为断点。我们称其为断点，什么叫断点，就是在这个点会发生变化，也就是什么呢？也就是诶样式，我们这个什么呢？哎，网页的一个样式会在什么呢？会在这个点时发生什么呢？发生变化啊，发生变化，每一个网页只要是想要设计都会有这么一个断点，比如说你看啊这块它也是一样，我们打开这个开发者工具，你看啊，现在我屏幕比较宽的，它是一个效果啊，我们来看一下，我这一拖，我们看什么时候它竖过来啊，什么竖过来。

哎，现在你看是不是应该是一个，诶，你看740 749，七百五还没变，756再看啊，再大一点，诶，你看它应该是在768是不是发生变化的，哎，768 767这块应该是它一个分界点，所以它这块就有一个断点，应该就是一个768，当768以上的时候，它就是一个宽的，当小于768了，这个时候是不是就一个竖着，竖着排列的，哎，竖着排列，所以768就是一个断点啊，就一个断点，所以这个时候我们注意，我们在做这个响应式设计的时候，我们一定要考虑什么呢？哎，我们一定要把这个断点给它考虑清楚，也就是说你的网页会变，但是它不是一直变的，就是它有的时候变呀，是细微的变，比如说你在七百六八以上，它也会变，你看它可能也变宽变窄，对吧，但是它不会像那种布局上的一个大变，布局像那种大的一个变化的话，它是需要明确到某一个点的，满足什么条件的时候，你去发生变化，所以这个发生变化的点我们就称为什么呢？断点，那这。

这个断点的话，一般情况下，我们来说一下，一般我们比较常用的断点啊，比较常用的一个断点的一个结构，哎，我们有一个第一种，我们叫什么呢？是一个叫做小于我们这个768的，哎，小于我们这个768的，也就是说你比768还小啊，你百你比768还小，那这种呢，我们属于叫做一个超小屏幕啊，超小屏幕诶你比这个768。还小了啊，你比768还小了，那这块就等于是我们一个这个max是一个768，对吧，你小于768嘛，Max是一个768超小屏幕，诶超小屏幕那一般就是什么呀，我们就是一个max的一个Y等于一个这个768。

那这种东西一般就是我们的什么呀，手机啊，小屏幕嘛，手机啊手机，那还有一个什么呢？是我们这个大于我们这个768，诶大于768，那这个属于什么呢？属于我们叫做小屏幕啊，小屏幕，小屏幕的话，那就是大于768嘛，那这个时候就等于它的一个M外啊min外等于一个768，这是一个小屏幕啊，注意我们说的都是一个范围啊，它有一个上限对吧，上限，那再来就是什么呢？还有一个就是大于什么呢？大于我们的一个大于我们叫做一个992。大于我们的一个992，那这个是一个，我们这个叫什么呀？哎，叫做一个这个大屏幕啊，大屏幕就是你在我们这个992以上了，这是一个，我们算是一个中型屏幕，哎，中型屏幕。

中型屏幕，那这种的话应该是一个什么呢？应该是一个m wise是一个什么呢？是一个这个992个像素啊，992像这属于就是什么呀，就是那种啊pad呀是吧，那些东西啊，然后就是什么呢？还有大于我们这个一千一千二的，那这就是我们这个大屏幕啊，大屏幕那可能是我们这个电脑的显示器啊，或者一些比较高清的一个屏幕，那也就说我们这什么呢，你比它还大了，那我们的M外是一个这个什么呀，是一个这个，哎，1200像素啊，1200像素，那这个是我们在做的时候比较常用的几个断点，其实这个就是我们以后会学的一个框架，叫做一个boottrap，它里边所规定一个断点啊，什么768啊，9592啊，一千二啊，这么一个范围啊，大部分网站都用的是这样一个规则，但是它并不是绝对的，你说我就老师，我就觉得这规则不太好，我自己指定，我觉得765好，我觉得600好，OK，这个可以自己指定，但是如果你不知道的时候，你可以用这个常规的一个规定方式啊，所以这里边我们就可以。

哎，用它去指定这个断点，也就是说当到这个屏幕的范围的时候，它会发生什么呢？会发生变化啊，会发生变化，然后这里边注意了，我们这儿的这个规则，我们可以什么呢？我们可以连着写，现在我这是写了一个mean外是一个500，那是不是等于是我让你大于500的是这个效果是吧？所以现在的效果是这个东西它一直都是什么，只要比500大，它都是这么一个绿色的背景啊，只要比500大都是这么一个绿色背景，那现在我希望什么呢？我再给它加一个上限啊，加一个上限干嘛呢？诶，比如说我希望你是在600~700之间，也就是你还要干嘛呀，小于700，那我怎么写？哎，那后边我还得需要写一个，写什么呢？我再加一个括号，我们叫一个什么呢？叫一个max max y，这是一什么呢？这是一个700像素，那注意了，我现在这是不是有两个条件了，哎，两个条件了，那么如果是两个条件的话，你中间的话应该。

给它连起来，当然我们可以用我们之前那种连接方式，我可以直接写什么呀，写一个逗号，写一个逗号就表示货的关系了，那货的关系表示什么意思，那表示你小于500，诶你知道大于500或者小于700，所以这时候你看啊，大于500的时候会是它，然后往下走，你看到300多了也是它，为什么？因为300多时候满足小于700啊，哎，满足小于700，所以也会这么颜色，所以记住了逗号连接的条件表示的是一个或者的关系啊，就是哎，你或者满足这个，你或者满足这个，所以我这如果演示的话，我这改一三百，改一个300，那这个时候它的效果是什么呢？它的效果就是啊，它的效果你看就是当我大于500的时候是会这个颜色，但是当我同时干嘛呢？你看它400时候就没有，但是当我小于300了以后，它是不是又会变成这个颜色呀？哎，所以它这是一个货的关系，那我们如果说希望在500和700之间，我们这儿可以用什么呢？我们可以用一个and的连接，And表示什么意思呢？And的表示与的关系。

同时满足，所以这个时候表示的意思就是500~700之间，你看啊，你看到了700时候就没了，哎，你可以在这儿来指定一个具体的一个范围啊，具体一个范围，那像这个完整写法，我们上边是不是还说了，我们这个这个是媒体的一个类型啊，哎，我们还可以再加上一个完整的就是一个什么呢？诶叫做一个这个only的一个什么呢？Only ly only的一个string，诶然后and一个它也就是说，哎，你是屏幕同时你的最小宽度的时候，你的最大宽度少，这是一个最完整的一个写法，那这个时候效果其实是一样的，其实这困的话，其实你也可以省略不写，省略不写呢，就表示的是任意设备啊，效果是一样的，好，那这个就是我们做一个这个媒体的一个查询，这么一些特点，其实也比较简单，那除了我们的宽度以外的话，媒体查询还有一些别的，你像这个玩意儿这个什么呢？这个是我们屏幕的一个一个方向是吧，什么什么颜色有有一有一系列的，我就不一个个说了，你可以自己点。

你去看一下啊，这是什么？横屏竖屏对吧，你可以自己看一下，我这就不一个说了，我们用的话，我们主要就用这个宽度和这个高度，横屏竖屏这块我们后边用到，我们再去讨论这个问题啊，然后呢，其实主要用法就这些了，我们主要用法就是这玩意儿啊，主要用法就这玩意儿，然后呢，我们再说的话，还有一个不是那么常用的，你看啊，这些都是我们连接的条件，一个是and，还有我们的一个only，还有一个逗号，对吧，是这些东西，还有一个不是那么常用的，我们叫做一个not not叫什么呢？Not叫就是非啊非或者叫除了啊除了，所以我们这儿也可以跟media这前面加一什么呢？加一个这个not，加一个not啊，当然这only那去掉是吧，我可以直接写一个not，那这not表示什么意思？哎，就是除了他们以外，也就是说跟它相反的，OK，你是处，那我就是假的，你是真我就是假，你是假我就是真，就是除了这种情况，就是正好相反，那这个东西呢，我们相对来说用的比较少，因为它。

它是整个对，它不是说不是屏幕，它是对后边整个全都整个取否啊，整个否定就是正好相反的一个，就是我给你反着来啊，这个东西用的不多，所以我你需要记的话，你就是需要记到我刚才给你讲的，我们这种最常见的一个用法，再说多了也没什么用了，是吧，然后我们用到我们再去说就完事了啊，最常用的就是这玩意儿啊好，那么关于这个媒体查询我们就说完了，待会儿我们来通过媒体查询，我们来做一个练习，当然你在做练习之前，你可以先试试这些东西是吧，找一些看看是什么效果啊，什么效果我们来停一下。