html+css實現電腦端顯示(隱藏)手機端隱藏(顯示)

兩個地圖，電腦同手機顯示不一樣，

一個電腦瀏覽，電腦端顯示，手機端隱藏；

一個手機瀏覽，電腦端隱藏，手機端顯示；

這樣就可以適應實現顯示不同效果。

html：

//sj
<div class="sjbdmap" style="text-align: center;">
<iframe width="318" height="649" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/s/GaKIFb"></iframe>
</div>
//pc
<div class="pcbdmap">
<div id="map" style="width:100%;height:500px;border:#ccc solid 1px;font-size:12px">
</div>

css：

.sjbdmap{display: none;}
@media (max-width: 768px){.sjbdmap{display: block !important;}
.pcbdmap{display: block;}
@media (max-width: 768px){.pcbdmap{display: none;}

效果：

電腦

手機