详解使用CSS3的@media来编写响应式的页面

@media screen and (min-width:300px) and (max-width:500px) {
/* CSS 代码 */
}

min-width:300px 的作用是当文档宽度不小于 300px 的时候就应用 {} 里的CSS代码块，即大于等于 300px max-width:500px 的作用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块，即小于等于 500px 是不是这样想就容易明白了些呢？ 4、这里有个弯很难绕过来，自己多动手做做实验，多动脑想想，就豁然开朗了。