media query 里的 min-width 和 max-width 要“反着”来理解：min-width: 768px，表示最小宽度是768px，即它下面的样式代码在屏幕宽度大于等于768px时生效；max-width: 768px，表示最大宽度是768px，即屏幕宽度小于等于768px时生效。
搞清楚了上面的原理，再来看 ipad 的 media query 被设为 min-width: 768px，因为ipad的竖屏使用场景较多，所以就能优先应用到该样式，那么设置 max-width: 768px 行不行呢？当然也可以，不过这样写，它下面的样式代码的适配场景就少得多，而且这种写法不符合自然的逻辑思维，理解起来有点绕。
max-width最大宽度与min-width最小宽度上面那段，是在最大宽度320px以内的屏幕生效css。
下面那段，是在最小宽度320px以上屏幕才生效。
@media screen and (max-width: 300px) {body {
background:#000
}
}
@media screen and (min-width: 301px) and (max-width: 1000px) {
body {
background:#eee
}
}
这样你应该看得懂了吧，
前面的是，应用于最大300PX宽的
后面的是应用于最小301，最大1000的。。
也可以下面一样用，把单独的各个样式写在CSS文件里
<link rel="stylesheet" type="text/css" href="style300.css" media="screen and (max-width: 300px)">你复制那段CSS到页面里，拉一下浏览器的大小就会发现变化了。
