做响应式网站一般使用css框架,例如:
Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。https://www.bootcss.com/Bootsrtap是美国twitter开发的一套css响应式框架。
今天介绍一个小技巧,在不使用css的框架下控制web页面的显示内容。
以下为html5代码:
//手机端显示,pc端不显示,调用的百度地图
<div class="baidudmap" 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>
//电脑端显示,手机端不显示
<div class="map">
<div id="map" style="width:100%;height:500px;border:#ccc solid 1px;font-size:12px">111111
</div>
css代码:
.baidumap{display: none;}
@media (max-width: 768px){.baidumap{display: block !important;}
.map{display: block;}
@media (max-width: 768px){.map{display: none;}
显示效果如下:
手机端