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

OK。嗯，来看一下。好，来看一下我们这个课件啊，来看我们C3里面的东西。啊，然后我们三里面东西前面是不是已经全部讲完了是不是啊，我的考试你就看我这个笔记就行了啊，肯定是按我笔记这个思思路考下来了，懂不懂，你把笔记上的东西每个点你过一下，那基本上就没问题了啊OK，那我们讲了选择器啊，自定义自体新的UI方案过渡啊第三题变形动画布局扩展里面我们把一个大头已经讲掉了是吧？Flex布局已经讲掉了是不是好，那是另外一个大头叫做。响应式布局方案啊，OK，那这个响应式布局现在啊，我们说响应式布局肯定是以后的发展方向。啊，它可以一统三端的啊，PC端移动端平板端。啊，就这一种布局方案能够适用于三端，懂吗？我们现在学的所有的布局方案。

要么是适用于PC端，要么适用于移动端，像flex在移动端就用就用的比较多，懂吗？像我们之前讲的浮动啊，定位啊，其实在PC端用的比较多，能不讲，就是说其实我们选项画页面之前都是PC端画一套，移动端换一套，平板端再换一套。是不现在不一样了，现在干嘛想视频帮我们一统一下。什么意思？PC端响应化，移动端响直化啊，F端还是响应直化，能不能理解啊？只是说这种方案虽然说好，但也不是万能的。啊，他只能画一些比较简单的三端，三端适应的布局等等，比较复杂的，像淘宝京东啊，或者任何一个APP啊，里面布局方案跟P端有很大差异的，那我们必须P均端设几套，移动端设几套，能没讲啊，可是这肯定是个方向，值得我们关注，能没讲好，那我们来看这个响应式的补贴方案到底什么样的。

啊，今天我们上午会把响应式布局方案多点布局讲完啊，这两个方案我们一块讲完，讲完之后我们再来讲一下什么是规范啊，OK，这个很重要啊，来看一下响应式的方案啊，其实在我们CSS2里面就已经有过响应式了，只是我们没有注意过，我们来看一看什么叫响应式。OK啊，那响应式其实是一个布局方案，C3 C3里面有个东西叫做媒体查询，媒体查询啊，我来写一写CSS3媒体查询。是响应式方案的核心，也就所有是响所有所有响应式UI库，或者说所所有响应式方案的它的个什么核心，对，也就是说没有媒体查询就没有这种响应时的方案，能不理解啊，OK，来看一下。好，那我们首先来看一下，OK，想意识。

零四。哎。好，呃，来看一下，先直观的跟想象石去搭个照面，我们先来说一下，C32里面啊，就已经有过响应，是这种概念了，只不过我们没有把它给用起来，而且也不好用，来看一下。稍微提一下，比如说我来写个情报吧。叫做index点，好，比如说它是个它有一个钥匙表在外部link。OK啊，比如说什么CSSCSS啊，就直接在我们写吧，在这面index点三好诶。Inxin。ex.CSS是不是OK，好，那这边要新建一个什么。CSS文件是不是CSS在哪边，CSS走在这边是不是ok.css吧，OK，然后怎么办？

I。咋整？想想，比如说我这边来一个要是吧，比如说现在我这边不写，我上面来个D。OK，叫web吧，这个外是不是啥东西都没有啊，比如说这边我写一个什么。外是不是OK？外之后来个什么BORDER10PX的黑色吧，是不是外也个在这边子弟子弟Y是为100PX也为100PX是不是OK，马上下为零左右凹凸上下给你100吧。OK，我们说引进来了，那这个样式就应该能起作用，没有任何问题，是不是OK，其实这个link样式表里面还有一个叫tribut，就是它的一个HTML标签的一个属性啊，叫什么什么意思呢？PI，这代表什么意思？这个你是不是引入了一个样式表，这个样式表只有在打印的时候才才有作用。

这个样式表只有在打印的时候才有作用，我来看看CTRL有吗？有吗？我是不是你那个样式表进来，可是web上有应用到任何钥匙吗？没有看我去打印。打印在哪，这边是不是有打印，打印的时候你看。预览吗？有没有，是不是就有了，相当于是不是我问你，你在CSS里面有没有写过120判断。没有，你看这相相不相当是个钥匙，只有在print的时候才能去用这个钥匙。是不是，当然他还有个参数，它还有一个属于是什么屏幕，这什么意思，只有叫什么。只有在彩色屏幕上才能用这个样式是不是，那我问你，我的PC端电脑是不是彩色屏幕的。

是不是啊，OK，这你看能不能用到这样能不能可以吧，来珍妮，我们来看一下打印的时候有没有。有没有没有了，打了吗？没有了吧，那你讲。好，那我们说什么，这个是在。这个叫什么C2里面的媒体查询，这叫媒体查询等等，其实我们这边在讲响应式，是不是我们其实不再讲响应思，我们在讲什么CSS3的什么媒体查询。可是这个媒体查询他是啥意思的？核心啊，OK，我们说C2里面其实已经有些苗头了，不知只播这个功能太简单了，而且一般我们也不用啊，来看一下C3里面把它强化了，CTRLCCTRLB，好，CSS3里面直接把它给强化了，这里来看一下。

怎么强化的？好，那打开这个课件啊，一般我的课件分两种，要么是马克档，要么是插麦的。走吧，OK，你呃，我们来看一下。嗯。这是我们讲的选择器吧，OK，媒体查询啊，CS3媒体查询啊，C3媒体查询是响应数的核心啊，它里面有几个概念呢？一个操作服，一个媒体类型，一个媒体属性，就三个概念，懂不懂，那这个操作你也可以叫它关键字，一样的操作服不足可以叫它关键。字这里啊，那这里这个东西比较很比较重要，我把它先放到下面去啊，我们线下媒体类型。OK，我们来看一下C3的媒体造型，它长什么样？只有你CTRLC拎过来CTRLB，好，我们叫零一什么？先讲媒体类型。

好。什么玩意呢？来我们来写一个选择性啊，不是我们来写一个媒体查询啊，媒我们说媒体查询叫什么叫媒体查询选择性来看一下是这样这个星号么，全部干掉，看你全部干掉是不是OK，我们说你这个。Web走你V100PX。100PX1PX实心OK来看一下。没毛病，是不是OK marin稍微给一给。上下100P左右，这好说过来了，好来看一下，我们说这边来一个at，没来看一下它是不是，这是不是一个选择性，这叫媒体查询选择性以at面的开头，对不懂，那这个东西我们暂时先不看，我们看一个比如什么C，这代表什么，只有在屏幕的时候才能去用到里面的样式懂不懂，而且记住这里面去写什么。

一般我们说这里面是不是直接去写声明了。去写什么我们规则家不是一个什么声明吗？记住媒体查询里面写写规整，什么叫规整？什么叫规则选择器加声明款，你不能直接在这边写个，比如说我在写个我的。那会有任何作用吗？它里面必须写规则，你说你这个玻璃给了谁啊？

不知道吧，这叫媒体查询选择器。媒体查询选择器对CSS选择器的特殊性不会做任何风险。也就说它跟CSS选择器的呃，生命的优先级没有任何关系，能理解吗？OK，它就是个以判断，相当于只有在彩色屏幕的时候才去运用下规则，那怎么办？OK，来看一下这彩色屏幕时候是不是去用了这个规则，看打印的时候有吗？有吗？没有了，有没有理解，OK，再来。好说一下，那么再来看，如果我把这个东西写到。上面来有没有意义啊，上来我说外给了一个波的，下来外的把这个波的给他覆盖了。有任何意义吗？没有，懂不懂你就记住，这个就是一个判断，在某些条件底下，这个规则才有作用。

懂吗？他不会对声明的优先级做任何的贡献啊，这边为什么用不上是你的自己什么顺序的关系。能理解，能不能理解我的意思啊，OK，那我问你，嗯，OK，那我这样写。走你那我是不是有彩色屏幕，那我是不是还有个嘛，打印的时候啊，你说一下现在有吗？没有打印的时候该不该用。有了，是不是我写到上面去了。这个。说一下这个里面没有很正常是吧，这种是压根不会被吗。用到吗？打印的时候呢。有没有？也没有了，因为你这个规则被这个规则给覆盖掉了，一模一样的懂吗？OK，那我们说一般媒体选择器这种东西写到下面来，你想让它有起作用，你就是想为了里面的规则去覆盖上面的。

是不是一般我们写到下面懂吗？OK，那这种设备类型有几种呢？现在我们学了一个彩色屏幕，学了一个打印啊，是不是看一下还有什么。哦，代表所有个的，代表彩色屏幕，对的代表打印预览，这里面的东西不用你管知道就行了，TV啦，不是用设像素的设备啦，那这个什么盲纹打印机啦，一般我们接触不到。懂吗？就只需要你管上面这样。三个能不讲，OK，那这个媒体类型应该简单。是不是好记住，我们是不是学了一个新的概念叫做。媒体查询选择器，这是一类很特殊的选择器，媒体查询选择器后面跟了一个大括号，大括号跟的是规则集。能不能讲跟我们之前一样吗？不一样的，OK，好，那再来看这个媒体类型是不是比较简单，OK，那我们再来讲媒体属性。

CTRLCCTRLCCTRLV02，我们来讲一个媒体。媒体属性。好，注意好媒体书写。什么叫媒体属性呢？那像比如说我把它换成彩色屏幕啊，后面有个关键词叫做and，代表雨的意思。OK，来一个括号。比如说什么，我说哎，我看有哪些媒体属性吧，是不是CTRLC。Y等于800。Y等于800PXOK，这个代表什么意思？也就说首先你得是彩色屏幕，而且你的浏览器宽度得为800PX，我这个规则才用来看一下。

首先我是不是彩色屏幕F。走你多少900多是吧，走去800。来走你诶。我们说这个Y是不是好像没有起作用，看我是不是写错了。啊，冒号吧，我写的什么等于号，你该什么冒号，刷一下刷一下你看是不是有用了，而且这个时候正好是啊，你看801就没用吧，也没有吧，你看我。上面是不是，你看必须是什么。必须得是800是吧，等一下都。不行啊，好累啊，那就是什么800的时候才可以懂不懂OK，那这种其实用的应该不多，是不是，我们这个Y是代表什么。叫什么浏览器窗口或者四口也行是吧，浏览器窗口的尺寸是不是OK，而且一般我们响应时你只考虑外，不要考虑其他的。

高度上面我们说让你出现滚动条很正常。说我们说一个页面高度上面出现滚动条是我们所可以接受的，我们也喜欢的，我们要我们的鼠标滚人是可以滑的是吧？当你的宽度上面出现滚动条，那我就不喜欢了，你有横向的鼠标滚轮吗？没有用户操作就干嘛不爽了，懂不懂，所以一般我们不考虑纵向的，只考虑横向的，在布局的时候懂不懂，那比如说哎这边可以其实什么，它还有几个是就这个Y啊，它是可以加前缀的，加mini前缀或者说加max前缀来看一下，如果是mini前缀，这代表什。最小宽度为800PX，也是所有大于等于800的。窗口都能用到这个规则，所以刷一下。

是不是一旦小于800就没有，一旦大于800就有能不讲OK，这叫最小值为800的时候，懂不懂你是什么？我面念Y是为800的时候，在于什么？大于等于800才有用？懂吗？OK，走，你那有面有面的就是什么max。Y代表什么意思啊？小于等于800。陈勇，这里还有一个max。Max是不是，所以小于等于800吧，你看这时候都是小于等于800的是吧，一旦。小于等于800，是不是都都是有的，超过800看走你没了。这能能理解，OK，这是我们讲的第一个什么。

媒体属性嘛，是不是再来还有什么媒体属性。来看嘛，是不是这是我们讲的第一个。好，它可以加mini跟什么ma前缀是不是OK来讲，第二个OK叫什么。看课间吧。还就不讲了，还基本不用讲，OK，他代表浏览器窗口的高度，那么还有什么。Device device什么意思啊，设备是不是？哎，我们说改成device device也是一样可以加前缀了，懂吗？那我先不加前缀，我说你这个DYY必须得是414的时候才能起作用。是不是好问你走，你上来看有没有起作用。没有起作用，我F12~410是不是应该起作用了。也不会起作用，这个叫什么设备宽度什么意思啊，这个其实我们之后会很详细的去讲啊，我可以给你带，我可以先带你们看一看。

啊，就是你们如果有能力的先可以去。预预习啊，我们会讲这么多概念，什么是设备独立像素，什么是位图像素，像素比物理像素，CSS像素，物理像素与CS像素的关系，高清屏幕，屏幕尺寸布局时口，视觉是口，理想时口，这些都是我们在移动端要讲的一个基础，懂不懂那这里面会很绕，这也是我们概念上面最复杂的一天的课，懂不懂那现在你们先简单的理解。什么呢？点就是你的设备宽度，想想设备有什么宽度分辨率呗。分辨率嘛，是不是看一下我现在分辨率为多少。这里看一下我的显示设置吗。我的分辨多吧，1366嘛，1366乘以768嘛，这就是我的设备像素，懂吗？OK，那比如说干嘛，我说这个时候我来个1366应该就能起作用，这里看打不打脸。

没打是吧，1365都不行。看见没有，OK，那我放到移动端。来看一下我们说移动端在这边有没有看到三百二乘以568，这就它的一个设备像素，懂吗？一般我们之后会叫它设备独立像素。啊，OK，这就是什么，我们的设备像素能讲，比如说干嘛，我说现在把它调成414的时候，是不是干嘛你才能起作用，那在我的IPHONE5底下是不会有作用的，可是我的IPHONE6。I6没有爱六。没有IPHONE6啊，居然。IPHONE7PLUS是不是也是414。是不是啊，当然这边你可以去填了啊，这边有设备是可以填的。早天的我忘了这边啊，去加一些什么设备的类型。

嗯。去加什么。就在那里。嗯，我说一下啊，你怎么总是突然吓我，来看一下在哪，应该是。Remove，先把他删了。嗯，看看。嗯，这是把尺子拿出来，是不是隐藏尺子？嗯，英钞第一个不对劲，我感觉啊啊这边啊对在这边是不是来看一下，那这边我可以把IPHONE6干嘛，IPHONE6跟IPHONE6PLUS干嘛，给它点上来看一下，这边就应该有IPHONE6跟I6PLUS，是不是IONE6 ione6plus应该也是414是不是就启动了。

能不能理解啊，OK，这叫什么，这个叫做Y啊，它也是可以跟什么明跟max，比如看什么我跟一个什么明百88，就是最小为414吧，是不那问你。他最小四是小，小于等于最小为四，大于等于400啊，你看我等于400是不是可以的，这你看一下IONE4行吗？就不行了，那讲OK，当然也可以有个么那一样的规则，讲OK，那我们来说一下代表什么。代码代表设备像素。啊，其实真正的名字叫设备独立像素啊，设备独立像素PC端你就可以简单的把它理解成什么分辨率，这叫分辨率是不是移动干部是什么，移动端干嘛，我们说是有什么。

是有这个参数的吧，是不是OK，你知什么，具体看什么，机器的参数真没讲，你在移动端你还能去查查自己的分辨率吗？右键查查分辨率行吗？没有设备是可以这的吧啊，一般去上网查这个什么设备的啊，独立设备维度就可以了。道在。Chome里面，它在跟这边给我们展现了出来，三百二乘以480，这就它的个设备像数，对不讲OK，那所有你好，它也是可以加什么。选对了，OK周你那再来看一个啊，还有什么，还有什么一些。看一下媒体上里面还有什么picture什么。啊，Raio吧，是不是这是干嘛设备的一个像素比吧，是吧，来看一下什么叫设备像素比。

好，PC端这个字就是唯一。PC端这个值就是为一懂不懂移动端这个值，具体看机器的参数上哪去看，只有你来找到移动端，好，这里面是不是有个你看。D是什么是什么？瑞吧，是皮嘛。是不是你看DP是多少二嘛，是吧，看F6PLUS d p就是三嘛，那边讲，那我们我们这边来看，比如说干嘛，我们说你的。维修对外。一啊，我才能起作用，那这个有吗？没有，你看IPHONE4有吗？没有，看PC有没有。

刷下是不是也没有说明PC里面是不是也不是一样，是不是因为一般这个东西啊，告诉大家要加前缀，不然是没用的，来看一下这你哎是不有啊，那讲那只有唯一的时候才有吧，就这个东西比较奇怪，只要加外配的啊前对。必须加BK前缀教你是不是，那么你现在是不是你的像素比必须得是一啊F12，到了移动端没有一款设备的像素比为一吧。是不是自从IPHONE4之后，所有的苹果系列像素屏不可能唯一，因为IPHONE4之后的屏幕是不是都叫做视网，视网膜屏啊，高清屏啊，是不是高清屏的像素比不可能是一的，普通屏的像素比才可能是一，懂吗？OK，好，那这是一个什么概念？像素比的概念吧？好，OK，看这个像素比它能不能加，也是是，是不是也可以加大，那是不是web k干什么？

没你高是不是来看下我说么，是不是大一点一就可以了，是不是走你看一下。哎，是不管什么设备都是可以的，大一点一就可以了嘛。能理解我的意思吧，OK。应该不能吧，不能吧，都是都是什么，都是需要你们去记住的东西，跟你讲，在最后来看还有什么。吗？是不看这个吗？代表横竖屏来看一下这是个什么鬼？代表和作品，走，你看OK，看一下后面这个字啊，这个代表什么竖屏。

断网了。有吗，现在。看不到你吗？你们都。现在呢？好了是吗？OK，是不是都可以了，现在好来看一下，我们刚刚写的是这边是不是都没有带带引号的，来看我带引号这个，这个代表什么竖屏吧，只有你。F12，你看现在我是个竖屏啊，它有没有用上没有吧，一般这边是不能带引号，这是一个关键字，懂吗？这点。多了一个是吗？来看一下，应该是不能带引号的中间。用上了吧，你看带引号是会有问题的。

看见没有，这是个关键字，懂吧，OK，你有发现我写CSS这个有哪些东西是带双引号的吗？你现在写到现在有没有东西在带双引号的，有吗？除了方啊，说什么放放吧是不，这些是不是有空格的。文本跟文本之间有空格的吧，用引号包一下吧，其他大多数都是关键字吧。能不能理讲OK好，我们这是什么一个竖屏的时候吧，这么区分横竖屏的，那我问你这个是一个什么表。横品嘛，宽度比你高就来的大嘛，那就是一个横屏嘛，是不是你看我让它变小。你看这不就是一个竖屏吗？宽度比你高度小，不就一个竖屏吗？能不能理解？OK，我们说这个是不是只有在竖屏的时候才能起作用，懂吗？OK，那我F10再进来，大家看这个里面还有一个按钮，是不是横横竖比可以去切换的，这里你看。

看到没有，OK，我们说这是代表。竖屏这个代表横屏，来看一下横屏。好，一模一样的，现在是竖屏不起作用吧，一旦横屏它就启动了，懂吗？比较简单吧，那到现在我们是不是讲了什么媒体类型跟媒体属性，这能不能接受啊。这个能不能接受，这个极其简单嘛，是不是，那待会再来讲一下这个嘛，关键字好，现在个先停下。