让网站DIV因为PC和手机端不同显示不同的内容代码


现在网站没有手机APP那么吃香了,不过网站对于内容的展示还是比APP来的更加的简单直接,并且可以从搜索直接过来。所以网站也要适应手机端和PC电脑端了,那么怎么来实现呢?其实也不难了。这里分享通过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;}

这样就可以在电脑端和手机端显示不同的内容,防止电脑端的内容在手机端显示的不友好了。