00:00
好,我们继续来上课,那么这节课呢,我们来学习一下我们CSS3的这个媒体查询啊,那么在学习媒体查询之前,一样我们也先来看一下啊,那么咱们这个CS里面这个响应式布局啊,就是那个媒体查询啊,他是在2015年提出的这个一个概念,那么总而言之呢,就是为了干嘛呢?让一个网站能够兼容多个终端,而不是为每个终端去做一个特定的版本,对吧?什么叫为每个终端去特定一个版本呢?比如说当前我是手机端来访问的,那OK,我直接是显示手机端的这么一个。页面对吧,如果是我要是这个电脑端就PC端来访问的,那我就访问就显示了一个PC端的页面啊,那么也就是说这里边是有两个页面对这个概念呢。我们当前这个媒体查询呢,是为了干嘛呢?是为了这个解决移动互联网浏览而诞生的,咱们想要式布局就是可以为不同的用户提供更加舒适的页面和更好的用户体验,而且随着目前大屏幕设备的普及,对吧,越来越多的网站都在采用这种技术,也就是相当于你当前,比如说你当前是什么,当前是PC端访问,我给你展示一个效果,对吧,如果是pad访问,诶我就直接内容可能在缩小,或者是比如说像这这个右侧这个图啊。
01:13
当前你这个电脑访问我可能展示四列,对不对,然后你是这个pad访问呢,我可能两列,手机访问呢,我是小一点的两列,看明白了吧,哎,这就是咱们这个享优势啊,并不是说并不是什么,并不是说你是电脑访问我是一套页面,你是这个pad访问,我又有是一套页面,而你这个呃叫什么手机访问又一套页面,并不是这样的啊,这就是咱们这个响应式。那么再往下来,那咱们响应设计一定是最佳的想选择嘛,不是的啊,如果你的预算充足,且形形式需要的话,做一个真正的手机版的网站是首选的,为什么这么说呢?因为响应式设计啊,没有专门设计,没有专门的去设计一个手机版网站的功能多啊,然后比如我们获取当前用户的G那个GPS定位啊,它只是用小游戏设计会很难实现,但如果只是根据四口大小为用户去提供一个视觉的效果还是比较不错的啊,所以它也有优点也有缺点啊,那么它的优点是面对不同分辨率的时候,设备灵活性更强,能够快捷的干嘛解决多设备显示适应的问题,看到了吗?它只是。
02:16
仅限于这样,但它的缺点呢,兼容各种设备,工作量大,效率效率很慢啊,而且代码累赘,会出现隐藏无用的元素,比如说你看现在这里边这里面啊,比如像这个页面,那么你看当前如果是PC端显示的话,OK,我可能显示了这么多,对不对,但是如果要是这个。Pad端呢,Pad端是不是至少我要舍去了两个没有显示,哎,你可以理解为是这边这两个是不是都去掉了,我只留了什么两列。啊,就是这个意思,我只留了两列,所以有的时候它是需要什么,需要去隐藏一部分内容的啊,需要隐藏一部分内容,当然我这个比喻不是绝对的啊,这些东西肯定不是这个,这是商品,商品很重要,它肯定不是什么呀,不是这个隐藏的对吧?你我给大家看一下,大家可以看一下这个。
03:02
嗯。有没有?大家来看,当我PC端访问的时候是这样的,对不对,那你想想咱们响应式的是不是都写到这一个页面当中了,那么你看我在说缩放缩放缩放,我让它变成什么,变成手机端大小时,你看那那些内容是不是就隐藏了,隐藏了是不是就变成了这个,那么如果如果什么如果是当前PC端那个PC端访问呢?PC访问是不是刚才pad端那些内容是隐藏的,哎,所以它是什么,多了一些无用的代码啊,多了一些无用的代码。然后呢,这里边咱说了,其实这是一种折中性的设计解决方案啊,多方面因素影响而达不到最佳的效果,一定程度上改变了网站原有的布局结构,会出现用户混淆的情况啊,这个很正常,就是我们再去用响应式布局的时候,会出现这种情况,因为它代码多而乱啊,所以在我们去真正去去做开发的时候,那么宁愿为他单独去开发一版专门手机版的啊,也尽量不会去考虑什么,不会去考虑响应式,除非是什么,除非是我们真的有必要或者是真的需要,只是为了给用户提供一个这种视觉效果,那么我们就用选项式还是没有问题的啊。好了,那再往下来咱们来看咱们CSS中的这个媒体查询是什么啊,作为CS3的这个规范的一部分,媒体查询可以针对不同的尺寸来设置不同的样式啊,注意是针对不同的尺寸来设置不同的样式,那么他为每种类型的用户提供了最佳的体验,网站在任何设置尺寸设置下都会有什么最佳的显示效果,那么通过不同的媒体类型和条件定义样式表。
04:32
的规则啊,然后呢,媒体查询让这个C可以更精确作用于不同的媒体类型和同一媒体的不同条件啊,那么比如说媒体查询的大部分媒体克星都会接受什么呢?都会接受。MN和MX什么意思?最大和最小用于表示什么大于或等于和什么小于或等于啊,比如说这个宽度属性,宽度属性就会有什么有最小宽度和最大宽度啊,这是咱们媒体查询里面的一个特点啊,它会根据什么呢?根据不同的类型和条件来定义我们的样式表。
05:07
然后这个呢,它功能非常强大啊,它可以让你定制不同的分辨率和设备,并且在不同内容的情况下让你制作外部页面,在不同的分辨率下或者是设备下能都能什么正常的显示啊,而并且不会什么不不会因此而丢失样子,说白了就是为了让这个设备更兼容,所以我们才用的对不对?那OK,咱们来看一下它的这个查询的实例啊,这里边我们通过这个语法来分析,那么首先比如说这里面定义了一个背景颜色对吧?那么这是它的语法screen什么意思?浏览器,那么艾media开始查询没查询查询什么查询浏览器设备,当它这是条件and并且并且什么并且最小的宽度对吧?Min-MT最小宽度等于多少?最小宽度如果等于992像素的时候,它的这个颜色变成这个看到了吗?如果它的最小宽度要是这个最大宽度啊,要是。等于这个呢,那它的颜色就是这个,如果它的这个最小宽度,并且最大宽度在这个范围区间,对不对,那它的颜色就变成这样了。
06:07
这就是他的这个一个小实例啊,那么一样,我们也通过这个来写一个小实例啊,咱们来看在这里边我新建一个。Me me。好了,那在这里边,比如说给他u Li,然后呢,Li这里边我给他,呃,比如说这是这个PC设备。我们应该是手机端啊,先来手机端吧,啊,比如说这个手机,当然手机端也是有多屏幕的,对吧,我就先统称了啊,手机端设备访问。设备访问,然后呢,再来还有什么Li,叫做这个PA pad pad端设备。端设备访问以及。PC端,PC端设备访问,OK,那么咱们来看啊,我做出这几个以后,接下来在这里面干嘛。来style标签。
07:02
好,我开始设置样式,我的意思啊,就是你当前是什么设备来访问,我就让它变换什么颜色对吧?但咱们说了,我们再去做这个响应式的时候,我们需要去给它设置一个me标签对吧?内属性等于v pot,然后content内容让它变成完美视觉窗口对吧?这个WTH等于等于什么?等于这个devce-WTH这是第一个条件对吧?然后第二个条件呢,我们是不是还要设置什么,设置它的这个1 : 1对吧?那就是这个init杠,呃,等于1.0啊,当然需不需要缩放,我不需要缩放对吧?或者我现在需要缩放,对于缩放轻实说放对于我们来说是没有影响的对吧?哎,那现在我给他设置完以后,当前咱们来看啊,我来开始进行设置。比如说默认情况下,默认情况下我在访问肯定是PC端的,对不对。那或者是行,就PC端的吧,那PC端的话是不是就Li冒号,我叫做last-child我让它的这个背景颜色变成什么,变成一个红色啊,那现在咱们来看我默认访问的时候。
08:09
来,你看是不是最后一个这景颜色变红色,那么咱们说了,当我如果是手机端来访问,那么手机端来访问,你看它的像素啊,是不是375乘以6667对吧,这是什么IPHONE678的对吧?那OK,比如在这里边我来给它定义一下,怎么定义呢?看好了叫做I media开始进行查询,谁呢?Screen浏览器,然后什么条件,后面开始跟着条件and对吧。按照按照什么条件with错了,我们应该是括号啊,然后min最小的这个。呃,With,我不能看最小,这应该是最大行最小啊,最小W,呃d wmin-WD最小宽度在多少呢?在这个375375像素的时候,对吧,包括我还可以干嘛,现在并且并且什么并且比如说最大的and。
09:08
并且并且最大的那就是max呗,对吧,最大的WD7就宽度应该在多少呢?比如说在这个,嗯,我看一眼啊,比如说在667,我670吧,在670像素的时候,也就说在这个范围区间的时候干嘛呢?我让它的这个背景颜色Li冒号,哪个背景颜色叫做呃NTH-Q的第二个,第二个是诶不对,第二是第二个吗?不是,我应该第一个是手机端对吧,那OK叫第一个啊,包括这如果是第一个,我是不是也可以给他什么,给他first child吧。哎,First,我让他的BGR变成了,变成这个GR啊,变成GR好了,那现在你们来看啊,我来刷新。你看是不是他变了?对不对,哎,这时候它也变了,那咱说了它变换的时候,它的样式是不是得取消啊,没错吧,哎,所以这个时候我们可以把它再加到这里边来,加到这里边来我干嘛,我再给它设置样式为n no ne,但是你看这个代码是不是觉得。
10:09
很麻烦。对不对,哎,他还得取消没说吧,所以一般的情况下,我们不会给他进行设置了啊,不会在外面进行设置,直接都设置到里边,那这个时候你看我把它把它也去掉了啊,我只留了一个,只留了一个,这时候我来刷新,你看是不是这样的,这里边咱们点它的话可以来回拖动啊,你看。你看啊,当我大于多少了,大于670对吧,你看好了,当我大于六六,诶6766767866866。你看668。算了。这里边我直接手动670。你看是不是还有,但是如果是671呢,是不是就没有了,看到了吗?哎,也就是说一旦大于670的时候,是不是就不走这个属性了。看到了吗?那不走这个属性了,那接下来我还有什么,我是不是还有pad端呢?那OK,再继续made I mill继续查询。
11:01
Secret and?Min-width比如说它的最小对吧,最小的多少个,比如说最小在671PX对吧,然后并且啊并且什么呢?并且我再给他个最大的,比如说M。AX杠。呃,WDTH吧。最大我让它在什么呀,在这个1024PS时候,那也代表这个时候是我的什么,是我的这个pad端来访问的啊,那我有打错梦哈I mein。最小宽度在这里,然后并且最大的宽度。OK,没有问题啊,我打字没有打错的,那怎么给我标上红线了。思路有错吗?从他到他区间,从他到他的区间也没有问题啊,671675。没问题啊好没问题,那这里边我让他的Li。
12:04
呃,应该是第几个了,这个应该是第二个了,对吧,那叫做NTH-child第二个Li,我让它的背景颜色变成什么,变成这个yellow黄色好了,那现在啊,我们来看。来刷机,你看是不是黄色,哎,来说回来是不是绿色,你看也相当于当我在手机端的时候。是不是走这个,哎,那么因为刚才我的像素给的太小了,这咱没有这么点屏幕的手机吧,对吧?哎,包括最小屏幕200多像多的这个也肯定也没有对吧,咱们一般像素最小都从300多开始起啊,你可以啊,这里边你看它有一些模型的手机,你看最三百六对吧,三百六四百一一。看到吗?411。啊,三百二这都最小的五五跟5SE了,对吧?哎,然后678335没错吧,哎,那么直接我用它,我是用它是可以来回拖拽方便一些啊,那么咱们来看,只要是达到我们这个要求,它是不就走的手机端的样式对不对,那么也就相当于在这里面就看你怎么设置了,你设置这个手机端显示什么样子,是不是就是什么样子,对吧?比如说在这个阶段,我让他这个Li是这样的,对吧,那我还可以干嘛,我说所有的Li给我进行一个浮动呗,比如说这里边float left所有Li它浮动,那你看刷新是不是都浮动了,哎,那么一样返回来走走走走走,当到了大屏的时候,你看是是又回来了,到我一个这个pad端是不是又回来了。
13:23
对吧,又变成什么不浮动,然后背景颜色变黄了,对吧,那这个端我也可以怎么样,比如说我让它的这个。嗯,所有的Li,比如说我要它什么呢?让它去掉它的样式吧,那叫做list到stylele,等于NV去掉它的样式,那现在你看我来刷新所有R是不是去掉样子了,对吧?小的时候是什么?小瓶的时候是不是它这个第一个是变成绿色对不对?哎,然后大大大变成它了,那再大等到大到一定程度,也就是我PC端的时候是不是。来ADD me screen,这里边我直接给他一个,比如说给一个多少,给一个and吧,然后这里边叫做ma。
14:02
X最小的宽度,比如说在1024的时候,1025像素的时候,那是不是就相当于走到PC端了,那么走到PC端的话,好我Li冒号NTH不用叫做last杠,是不是最后一个,最后一个list-style等于呃错了错错错错了,给他一个背景颜色啊。BGR为红色,那你看当我到这个移移动端的时候,你看是不是自然而为红色了,哎,看到了吗?那往里缩小看,再缩,你看是不是每一个版本都显示了不同的样式,看到了吗?哎,这就是咱们的媒体查询,媒体查询不难,就这么简单的这么一个语法啊,就是干嘛判断你的设备到是什么样的这个宽度的时候你要怎么样。啊,这就这就是咱们的媒体查询啊。好了,那么了解这个媒体查询以后,那接下来我们再往下来看啊,这里边才说了,以上是通过这个来定义媒体查询,然后它呢,代表的设备的类型,刚才我是不是用了一个screen,用于什么电脑屏幕,平板电脑,智能手机啊,这个也是用的最多的啊,目前只有这个screen最常用,然后and not only为条件,也就是说后面是and并且怎么样,对吧,Only是仅能只能怎么样,Not是除了怎么样。
15:13
对不对,哎,那么这个时候再往下来。这个东西干嘛呢?为媒体的特点,什么叫媒体的特点,通常我们会写什么设备的宽度,也就刚才我们写到这个,呃,比如你最大宽度多少啊,最小宽度多少啊,写到这里,然后在这个中间就写什么,写你的CSS代码,你该怎么写就怎么写啊,这就是咱们这个媒体查询的基本语法啊好了,那掌握这个基本语法以后,我们再来看,我们用媒体查询呢,主要是改造我们的设计,对吧?我们都知道样式表里边,咱们后面的样式会覆盖前面的样式,因此呢,咱们再去设置的时候,我们再。设置好网站基本样式的以后啊,使可以使用什么,使用美体查询来进一步重写相应的这个部分,但是呢,在PC端将这个呃,导航这边写的这个例子啊,将PC端的这个导航显示成简单的链接,然后再针对于小口相对小口的操作,对吧?那么使用媒体查询重写这一部分,那么理论上讲最好是什么呢?最好是从小屏设计开始是吧?小屏设备开始设计,然后逐渐干嘛,逐渐增强,也就是说移动端设备优先,然后再来一点点匹配,匹配什么匹配你的PC端啊,因为这块其实说的什么意思,说的意思就是我们现在啊都是什么,都是PC端定义好页面,因为所有人都会定义PC端的页面,对不对,不会写移动端页面,所以这是一个习惯,那么养成这个习惯以后,那么现在有人没给他询,我们只只能干嘛,通过我们目前写好的移动端的页面来去改成他的手机端的啊,这是一个不是太好的方式,最好方式什么?最好的方式是根据他是这个,根据他手机端的页面去写什么,写他的这个。
16:47
移动端的页面啊,不选它的这个PC端的页面啊,就是优先级嘛,相当于优先级,咱们优先兼容谁优先兼容小小视口啊,优先兼容这个移动端的设备,就是这个意思啊。然后才说了,理论上讲最好的是从开设备开始设计对吧,然后逐渐增强,但实际上我们使用媒体查询要解决的问题,现在已经存在PC端站点了,更多的是要将什么将现有的桌面桌面网页造成什么应式的啊,所以现在我们在写的时候都是反着写的干嘛呀,有的C,然后通过C端我们去干嘛设激它小屏的这个样式啊,所以这现在都是这么,我们都是这么去做了啊,所以在我们做的时候呢,我们尽量以这个P移动端优先啊,先以些移动端的,然后再往下看加载媒体查询的最佳方法是怎么加载的呢?咱们使用多个独立的CS文件会增加TP请求呢数量,那么使页面加载会变慢,所以我们在这个做媒体查询的时候,把媒体查询样式的文件尽量干嘛放到一个里边,然后加以注释,加以区分就可以了啊,也就是说像刚才我写的这里边所有的媒体查询都写到一个文件里面,然后每个居注释来区分,比如说这个,比如说我啊,我们在写的时候,那他可能就什么叫做这个。
17:58
Pad端设备。
18:00
对吧,Pad端。设备啊,然后呢,再往上来这个呢,那可能就是什么,我们的这个移动端设备移动。端设备哎,用注释来区分,那么所有移动端的设样式我是不是都写到这里,所有pad端的注释这个样式我都写到这里,对吧?包括比如说pad端的时候,你的头标签要什么样对吧?你的这个比如说导航标签要什么样对吧?你的负的标签要什么样对不对?然后呢,一样在你的这个移动端的时候,那你的这个呃,PA的标签要找什么样对吧?然后这个你的这个OT啊,负的标签要什么样的对吧?你的这个导航标签要什么样啊,就是这么样来进行编写,这就是咱们的媒体查询啊好了,那这节课我们上。
我来说两句