尚硅谷前端基础 (143)

好，那么刚才我们讲完了这个移动端的一个练习是吧，那我们移动端的内容就可以暂时就告一段落了，那关于移动端的话，由于现在我们学的东西有限，还没有学GS，所以我们现在使用的一个适配手段就是一个呃，VW适配，当然还要结合我们的使用才更好用一些，那我们呃，真正到开发的时候，真正我们学了GS，我们还会有一些其他的一个适配的一个手段，那那些东西到时候我们再去，哎，再去研究，但是这个呢，它的万变不离其宗，虽然以后会有其他的一些适配手段，但是它的道理基本上是相通的，只不过我是借助的不同的参考物啊，所以道理是一样的啊，那么接下来呢，我们就开始进入到一个新的环节啊，那我们来看一下我们之前做的网网网页，你比如说这个小米，其实你会发现它这种网站它有一个特点，它有什么特点呢？你看啊。它这个网站你看我们它有一个右侧有一个工具条，这个工具条有什么特点呢？当我的网页比较宽的候，浏览器窗口比较宽的时候，这个工具条是贴到这儿的啊，贴到这儿的，但是当我的窗口比较窄的时候啊，或者我视口比较窄的时候，你看我这个条是不是贴到了这个位置，诶贴到这个位置，也就是说这个条它实际上可以根据我浏览器的窗口的大小是发生一个变化，诶发生了变化，那同理，除了这种网站的话，我们还有像QQQQ你看啊，它中间这个导航条现在是这么一个效果，当我屏幕宽了以后。

宽了以后，哎，但是现在的话它不明显，我们来看啊，给他往窄了条，你发现什么了，当我屏幕宽的时候，这导航条会跟着宽，当我屏幕窄的时候，这导航条是不是跟着一块窄呀？哎，也就是说我这个导航条它会自动适应我这个窗口，这个浏览器窗口的一个变化，对吧，那再看还有一个网站是吧，我们这个解开了一个官网。解是我们以后要学的一个这个GS框架，对吧，当然我们现在GSM没学的框架，先不不不说它了，但是我们就说一下它网站的效果啊，那这里边现在是网站是比较宽的一个情况是这样的，当我浏览器变窄了以后。

我们来看，哎，你发现什么了，发现什么了，诶这东西是不是变大了，哎，变大了啊再看。诶再窄他们是不是变成一溜了，哎我再窄变成跟手机屏幕一样大的时候，它就像，哎是不是就完全就竖着去排列了，哎竖着排列了，所以我们会发现这些网站他们的布局实际上它是不是固定的，哎不是固定的，它会随着你窗口的改变是不是而改变呀，哎窗口的改变而改变，所以这个时候我们要说的这个东西叫什么呢？哎，我们叫做一个响应式布局。哎，响应式布局，这里边我们来说一下什么叫做一个响应式布局，响应式啊，响应式布局或者叫响应式的一个设计，对吧？响应式的一个布局指的就是什么呢？诶非常简单，指的就是我们的这个网页可以什么呢？诶可以根据我们这个不同的这个设备，诶或什么呢？或这个窗口大小，诶窗口大小来呈现什么呢？呈现出不同的效果啊，呈现出不同的一个效果，诶你窗口大我是一个大的布局，我窗口小我是一个小的布局，这就是一个东西，但是注意我们所说这个东西跟我们这个移动端又不太一样，那你像我们移动端，移动端它是什么特点，你比如小米那个移动端，小米那个移动端的话，它的特点就是一个什么呀，它的特点就是它在这个手机上呈现是一一个网站，它在你看这是我们的小米的PC端网站。当我切换到。

移动端的网站的时候呢，它是这样的，实际上现在它是等于是两个网站啊，它是两个网站，而我们在这个情况下，这个是什么，它在宽屏下是一个效果，在窄屏下是一个效果，但是这是几个网页是同一个网页，所以这跟那个移动端它就是本质的区别，移动端是专门开发了一个网页，而这个是等于我一个网页适用于什么呢？适用于我们不同的窗口啊，所以我们这个通过响应式布局呢。

哎，通过我们这个，诶使用这个什么呀？哎响应式布局，哎响应式布局我们可以什么呢？我们可以使一个网页，哎适用于什么呀，适用于我们个所有设备，哎适用于我们这个所有设备，哎那它就就会大大的简化了我们这个开发，大大的节省了我们的什么开发成本，哎你以前的话，你要是做这个移动端，哎你要做移动端，你要兼容移动端，那你可能我得开发一个PC端，开发一个移动端，那现在的话，我们有了这种响应式，我可以开发一个网页，既可以设适用于所有设备，那我们开发起来也快，然后呢，成本也低，对吧，它是一个很好的一个这么一个方式，但是的话，一般呢，比较大的公司是不会，就是呃很少用这个吧，也有用的，但是很少用，因为这个时候它虽然是一个响应式的，但是它很多时候的效果并没有我们想那么完美，因为我们在移动端去看一个网页，跟在这个PC端看一个。

那个习惯还是不一样的，所以你沿用一个设计的话，它没有没有两端啊，我有一个P3，一个移动端，那个体验要好，但是这个也是我们的一个选项啊，一个选项，那这个响应式布局我们要怎么实现，那其实最关键的一个就是现在就好像我们这个网页它活了一样，怎么叫活了一样，它是不是好像知道我们这个窗口有多大呀，它是不是会自动改变，当窗口大的时候是横着排列，当窗口小的时候是变成这个一列了，哎，变成一列了，那问题就来了，那他怎么知道我窗口的大小呢？诶，那这里边我们就要说一个响应式布局的一个关键，那其实就是什么呢？就是一个媒体查询。响应布局的一个关键就是我们叫做一个媒体查询啊，媒体查询，媒体查询是干嘛的？媒体查询通过媒体查询什么呢？诶通过我们这个媒体查询，我们可以什么呢？为我们这个不同的这个设备啊，设备或什么呢？诶或我们这个设备的一个什么呢？诶不同状态啊，不同状态诶来什么呢？诶来分别设置样式啊来分别设置样式什么意思，什么叫不同设备，那不同的设备我们可能有，我们可能有手机计算机对吧，我们的电脑或者手机，电脑手机这些它是不是都有屏幕啊，哎，那这是一种设备，还有什么设备呢？有的时候我们的网页是需要用于打印啊，打印机可能又是一种设备，那还有的时候我们在国外它会有一些这种屏幕阅读器，我的网页是用来给你读的，而不是用来看的，那这个时候是不是就是不同的设备啊，哎，我可以针对这些不同的设备设置不同的样式，那可能打印的时候是一个样式，而你再去看的时候又。

就是一个样，你在屏幕阅读器里边又是一个样式，这是我们说不同的设备对吧？不同设备，但是这里边的不同设备指的不是说电脑和手机，电脑和手机他们都属于有屏幕的设备，所以在我们媒体查询这块儿，它属于同一个设备啊，同一设备还有什么呢？还有就是同一种设备都是屏幕，它有不同状态，我有的屏幕大，有的屏幕什么呀，有的屏幕小，有的屏幕是横的，有的屏幕是竖的，这个是不是就是说的一个不同的一个状态，哎，不同一个状态，那这个就是我们说的一个媒体，媒体查询啊，媒体查询，那这个媒体查询怎么用啊，我们来看一下文档，文档这呢，我们直接搜一下me meda啊，我们叫做一个media at，一个media直接点开，那这里边我们给我们列出来的，我们来看一下啊，它这里边给我们列出来的就是一个这个at media的一个使用，它后边是不是给我们列了一个语法呀？哎，你现在这儿举例子就是来了，举了一个这个媒体查询的一个语法，我们来看一下啊，它这里边。

这里面不全，我们看这个啊。

艾特media。在这它这有一个选项，应该就是这个media里边，Media里边有一这么一个叫做using media queriess叫使用这个媒体查询，Media就是媒体querys就是查询using使用啊，使用媒体查询直接点进来，我们会进入到这么一个网页，进入到这么一个页面，在这个页面里呢，它会给我们介绍这个媒体查询的一个使用的一个方式，首先的话，我们要用媒体查询，其实我们直接写啊，它是CSS3里边的一个特点，一个一个特性嘛，对吧，媒体查询首先你要写一个这个media啊media那语法就是以这个media开头，那这就表示你在使用这个媒体查询了，那这里边我们先说第一种，第一种的话，我们媒体询的第一种我们叫做一个media types，媒体的一个类型啊，媒体的类型，在我们的这个媒体查询当中，一共有这么四种类型，我们先说一下啊，我们使用媒体查询，我们这叫做一个使用这个媒体。

查询，那我们这一块我们来说我们使用什么呢？诶它的一个语法就是什么呢？就是我们这个media语法，语法那就是一个艾，一个me d，然后后边跟的是什么呢？诶跟的是我们这个查询的一个规则，哎，然后是一个大块啊大块，所以这里边我们先说一下media开头是肯定的了，那这里边我们就要先说一下它的查询规则，那这里边我们要说的第一组叫做一个什么呢？叫做一个媒体的一个类型，哎，它的一个媒体的一个类型，我们有这么几种，第一个叫O，第二个叫printt，第printt啊，第三一个我们叫screen scren啊screen，第四一个我们叫做一个SP，什么意思啊，什么意思？媒体类型就是指的是你那个设备类型啊，你用的是什么设备啊，那我们这个O就表示什么呢？表示的一个所有设备啊，所有设备，那我们来看一下这个O啊，我们这里边直接media后边你就可以直。

接写一什么呀，直接写一个哦，然后后边一个大框，那在这个大框里边，那其实我们这就写了一个媒体查询，后边是一个大框啊，在大框里边我们可以直接写一个样式，比如说我直接写一个body，来一个这个background color background color，我写一个什么呢？我写一个井号，一个BFC，那这句话什么样什么意思，那这就是什么样media哦，所有设备，那就是说无论你是在什么设备下，你的这个背景颜色都是一个这个绿色，也就是说我的这个样式会对所有设备都生效，所以如果我把它打开的话，你会发现我这个背景颜色就会是一个什么呀，就会是一个绿色，因为我们现在这个电脑是不是也包含在所有设备里啊，所以它也会使用啊，哦，表示一个所有设备，所有设备。然后我们下边一个print啊，Print叫什么呢？这个是我们的打印设备啊，打印设备，所以这里边如果你换成这个print啊PT，你换成这个print的话，你看效果，你这还有没有这个颜色，颜色就没了，为什么没了？因为print表示的是打印机啊，表示的是打印机只有什么，只有你在打印机打印的时候，才会打印出这么一个绿色啊打印的一个样式，所以这个时候在我们这个里面就没有了啊，就没有了，然后下边一个叫script啊，Screen，这是什么呢？这是我们这个带屏幕的设备，带屏幕的设备，那顾名思义，我们的电脑，我们的手机是不是都是啊，所以这个时候如果我这写的是media一个screen，那这个时候我的是不是就变绿了，哎，变绿了，所以你会发现它其实很神奇，是在哪呢？诶，它在这儿，我这一写，我是不是就可以给不同的设备去设置不同的样式了，哎，设置不同的样式啊，然后这个speech是我们那什么呢？是我们这个屏幕阅读器啊，屏幕阅读器这玩意儿就就不说。

二是吧，我们也用不上啊，我们用不上，但是如果你要给他设置的话，那你就是一个这个speech就完事了啊，这个是我们说的一个媒体类型，我们在这儿我可以写多个类型，比如说我可以写一个print，哎，Print，然后干嘛呢？我写一个逗号，来什么呢？来一个screen s音。

Script，那这个时候表示什么意思呢？诶表示说在打印机打印的时候，或者是在屏幕的时候，那都是这个都会应用到这个样式，所以这个条件就表示逗号，就表示一个货的意思，或者print，或者是这两种情况任选题，懂这意思吧，哎，这个是我们说的一个媒体类型，但是你后边还可以写speech，你可以接着写是吧speech，但是你这么写的话，你就有点这个有点多余了，你要这么写的话，你就不如写O了，对吧，你就不如写O了，所以这个表逗号表示的是一个或的关系啊，我们可以什么呢？哎，我们可以啊，可以使用我们这个逗号连接什么呢？连接我们这个多个设备类型啊，这个叫什么媒体类型吧，哎这个媒体类型媒体类型，那这样什么呢？哎，这样我们可以什么呀，这样他们之间。

哎，就是什么呢？就是一个这个货的关系啊，货的关系，货的关系，那一般情况下，因为我们这要讲的是响应式设计，那所以其实像这个哦啊print呀哦可能会用到，哎用也行啊，Print基本上不用，因为我们响应式设计，我们响应式是不是主要是在屏幕上去响应啊，所以我们一般我们写的话，一般这都不写，一般我们写就是什么呢？一般我们写就是at特media at特一个media，要不然就写个screen，或者要不然就写个什么呢，要不然就写个O啊一般我们就这么写法，或者有时候怎么写呢，有的时候我们写一个only，一个什么呢？Screen only死困啊，Only死困，那这个时候我们设置一个背景颜色，其实你会发现效果是一样的，效果是一样，一保存是不是效果是一样的，Only表示什么意思？Only表示的是仅仅啊，仅仅我们可以什么呢？我们可以在我们这个媒体类型前啊类型前哎添加一个这。

这个恩力，哎表示什么呢？哎表示只有啊，表示只有，只有什么呢？只有是屏幕的时候才会应用上这个效果啊，只有是屏幕的时候才会应用上这个效果，诶但是你说老师你不写only不也是一样吗？对，这only实际上就是写不写都一样，你不写它也是只有屏幕，你写上也是只有屏幕，那这only利是干嘛的呢？哎，注意了，Only利一点意义都没有，它只有一个顿恩利的使用，哎主要什么呢？主要是为了。主要是为了兼容什么呢？兼容一些这个老版本的浏览器，哎，浏览器什么意思，就是因为啊，我这如果写一个media screen at me screen，那这个时候有的浏览器不支持，他不支持呢，但是他还认识这个东西，就是这个screen在它里边也有意义，也有意义，所以你写一个medias困的话，可能像老的老的一些老版本的浏览器里面，它会出问题啊，它会出问题，就是说这个样式它还会应用，但是应用就不对了，它会出问题，但是呢，如果我加了一个艾特米，加了一个only，那么OK，这个only利有一个什么特点，老版本浏览器压根都不认，新版本浏览器都认识，老版本浏览器不认识，所以加上一个only的效果，就是我艾特me，诶艾特media读到一个only，那这个时候如果是一个老版本的浏览器，那这个时候它就直接忽略你所有的样式，所以它的作用实际上就是一个避免兼容性的问题，所以它是一个比较比较稳妥的做法，但是本身实际上你艾特media screen和艾特media only。

它没有任何区别啊，没有任何区别，好，那这个是我们说的一个媒体查询，我们等于是做了一个简单的一个介绍，诶你先自己去体会一下，先看一下这个，诶这个媒体类型的一个规则，后边我们除除了这个媒体类型，我们是不是还有一些具体的查询方式啊，诶那那个东西我们待会儿再去说它啊，来就说它，我们这先停一下。