老有人把响应式和自适应搞混，是因为老有人想要把它们分清。
哪有那么清晰的界限可言，采用方法实现目的就好了啊。为了某个效果，我组合使用怎么算？我不知道答案，我还是努力实现我希望的效果去了。
上一章所讲的方法已经可以解决很多问题了，如果设置得当，产生的变化也是很大的。但还是具有局限性，比如我想在宽屏下显示红色，手机下显示绿色……虽然这个要求好无聊，但是我们想想，好多网站不就是在电脑上一副模样，手机上又是一副模样吗。如果说这是两个不同的页面，可是模块划分，还有里面的内容，都一毛一样。要是写两个页面也有够无聊的。
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 的宽度，这个逻辑关系一定要理清楚。
暂无评论内容