你的 meta 貌似少设置了点东西：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

@media screen and (min-width:480px) {

                    body{

background: blue;

}

}

这个应该是max-width:480px

我的理解是： 当设备宽度应该大于某一像素（比如100px），那么100px就是允许的最小宽度（min即minimum,最小值），反之，当设备宽度应该小于某一像素（比如500px），那么500px就是允许的最大宽度

这么做是为了兼容更多的设备

12行的margin-bottom值和14行的margin-top值谁大谁起作用，可以改大改小分别试试，看看效果亲~答案是没有问题的哦~您可能对if...elseif...else的逻辑运算没有看清楚哦~可以仔细阅读一下我们知识内容部分的讲解哦~

and和（之间要加空格

什么叫当前索引

没有 当前 这一说 当前一般指 this  你所指的当前是你看到的那个图片 仅此而已

and和(之间要有空格

在谷歌中不能够起作用，没有效果。我也不知道为什么这样，现在谷歌不兼容响应式和video属性了

你引入bootstrap的文件了吗？

sublime text 

就是语法结构，唯一性

href=""里面写的就是你link.css所在的位置

我把only去掉之后神奇般的自愈了。。。一脸蒙

应该是在480px的时候维持当前的颜色不变，超过或小于的时候才变另一种颜色。

对了  注意一个地方 and() 要加个空格 and ()

and  (max-width:700px)  and 后面要加空格

你是想针对不同设备做布局吗？那不是响应式布局讨论的范畴 可以用JS判断UA来实现

1:IntelliJ IDEA  

2:  HBuilder

3:Sublime

4:dreamweaver

我也犯错了，多谢提醒