两个地图,电脑同手机显示不一样,
一个电脑浏览,电脑端显示,手机端隐藏;
一个手机浏览,电脑端隐藏,手机端显示;
这样就可以适应实现显示不同效果。
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;}
效果:
电脑
手机