第七十三章 响应式

老有人把响应式和自适应搞混,是因为老有人想要把它们分清。

哪有那么清晰的界限可言,采用方法实现目的就好了啊。为了某个效果,我组合使用怎么算?我不知道答案,我还是努力实现我希望的效果去了。

上一章所讲的方法已经可以解决很多问题了,如果设置得当,产生的变化也是很大的。但还是具有局限性,比如我想在宽屏下显示红色,手机下显示绿色……虽然这个要求好无聊,但是我们想想,好多网站不就是在电脑上一副模样,手机上又是一副模样吗。如果说这是两个不同的页面,可是模块划分,还有里面的内容,都一毛一样。要是写两个页面也有够无聊的。

HTML 是负责页面结构和内容的,也就是说,上面例子中 HTML 部分是不用变化的。如果我可以根据不同的情况切换 CSS 的话,那就可以实现这个效果了。

好,我们来讲讲 CSS 规则间的覆盖问题……这哪跟哪,好像不挨着啊。因为这个知识是解决这个问题的前提。

一般的,我们对于一个元素进行一次 CSS 定义就 OK 了。这时候没什么问题。但是上面可以看出,我希望对一个元素进行多次定义。这就有一个我用谁不用谁的问题了。

如果我们对同一个元素的某个属性进行了多次定义,那么写在后面的,会覆盖前面的。同理,后面引入的 CSS 文件,会覆盖全面引入的 CSS 文件(中重复的属性)。这很好理解,就是我们平时说的讲究先来后到。

但是如果是内联样式表,就是直接写在元素里的,那么它的优先级大于所有非内联的样式。

不过也不是完全拿上面这种没办法了,如果在属性值后面写上 !important,那就获得了“王炸”级别的优先级,甚至可以覆盖内联样式表。

如果再定义一次,也写上 !important,就以后面定义的这次为准。

如果内联样式表还写上 !important 就……有病!凡事留一线,不要做得那么没有余地好不好?

这个理解了吧,就是后面覆盖前面,内联覆盖外部,!important 王炸。

现在说响应式,响应式就是我们先定义一遍样式,比如让页面完美适应桌面设备的样式;然后再在后面进行覆盖定义,使它可以完美适应移动设备。

这也可以理解,但是,覆盖就是覆盖了,现在再回到桌面设备就不好使了。而我们期望什么?

如果这家伙聪明一点,知道桌面设备的时候不覆盖,而移动设备的时候覆盖,是不是就……

真幸运,它做得到,但是我们要把条件说明白,直接看实例:

#miaobox {width: 100px;height: 100px;margin: 10px auto;background-color: red;}@media screen and (max-width: 600px) {#miaobox {background-color: green;}}

这里的“喵盒”就实现了我们开始所要求的效果。代码也很简单,我们来解读一下:

@media 表示开始媒体查询,想想我们前面也学过 @ 开头的 CSS 哦,这是说这个东东不是选择器。

后面先是条件,screen 表示在屏幕显示的时候,别以为这个没有意义哦,虽然是网页,仿佛就是显示在电脑或者手机的显示器上而已。但事实上还有打印的时候,屏幕阅读器的时候。据此可以进行区分设置。

用 and 可以连接多个条件,表示这些条件必须同时满足。

后面小括号里又是一个条件,是说 Viewport 的最大宽度是 600px。也就是当 Viewport 的宽度小于等于 600px 的时候条件成立。一定要注意这个逻辑关系!

后面的大括号里是当前面的条件(们)被满足的时候,要应用的样式。因为前面已经对这个元素进行了定义,这里我们只需要写发生改变的属性就可以了。在媒体查询的大括号里可以放大量内容,不只是一个元素一个属性,而是可以把符合这个查询的所有内容都放在里面。

好,完整的解释一下,对于这个媒体查询,必须是显示在屏幕上,并且 Viewport 的最大宽度没有超过 600px 的时候,后面大括号里的内容才会起作用。

媒体查询可以用的条件非常多,请大家自行参阅手册,实在是太多写不过来了(大概 32 个吧)。一般常用的就是 min-width 和 max-width,相当于大于等于号和小于等于号,而宽度指的是 Viewport 的宽度,这个逻辑关系一定要理清楚。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第七十三章 响应式

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏