除了需要显示不同的背景颜色不同图片
有时候需要在不同分辨率的设备显示别的不同的内容例如自定义的 广告
可以这样写

<style type="text/css">
.pc_ms{display:block;}
.m_ms{ display:none}
@media(max-width:768px) {
.pc_ms{display:none !important;}
.m_ms{display:block !important;}}
</style>
<div class="pc_ms">你的PC广告</div>
<div class="m_ms">你的M广告</div>

这只是一个示例这个方法可以设定多种分辨率的多个不同内容展示例如下面这样：

.p1280_ms{display:none}
.p900_ms{display:none}
.p660_ms{display:none}
.p400_ms{display:none}
.p1280_ms{display:block}  //默认显示
@media(max-width:1280px){
.p1280_ms{display:block!important}
.p900_ms{display:none!important}
.p660_ms{display:none!important}
.p400_ms{display:none!important}
}
@media(max-width:900px){
.p1280_ms{display:none!important}
.p900_ms{display:block!important}
.p660_ms{display:none!important}
.p400_ms{display:none!important}
}
@media(max-width:660px){
.p1280_ms{display:none!important}
.p900_ms{display:none!important}
.p660_ms{display:block!important}
.p400_ms{display:none!important}
}
@media(max-width:400px){
.p1280_ms{display:none!important}
.p900_ms{display:none!important}
.p660_ms{display:none!important}
.p400_ms{display:block!important}
}

展示内容就需要都列出来了例如这样：（弊端就是所有内容都会载入一次）

<div class='p1280_ms'>1280px的内容</div>
<div class='p900_ms'>900px的内容</div>
<div class='p660_ms'>660px的内容</div>
<div class='p400_ms'>400px的内容</div>