响应式网页必备——media媒体查询

@media all and (min-width:xxx) and (max-width:xxx){/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/}@media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/}
还有个一是#media screen and (min-width:xxx) 
/*上面针对了所有设备，这段是彩色屏幕设备*/
例如
<style>
.test1{
    width:1024px;
}
@media screen and (min-width:1024px){
.test1{
    width:1024px;
}
}

@media screen and (max-width:1024px){
.test1{
    width:720px;
}
}

@media screen and (max-width:720px){
.test1{
    width:480px;
}
}
</style>
<div class="test1">
</div>
意思是：当你设备分辨率(或者浏览器大小，根据浏览器拖放大于1024时)为大于1024px，test1显示为1024px;
当你设备分辨率(或者浏览器大小，浏览器拖放小于1024大于720时)为大于720px小于1024px时，test1显示为720px;
当你设备分辨率(或者浏览器大小。。。。)为小于720px时，test1显示为480px;