响应式网站小技巧：web部分内容只在pc端或手机端显示 纯html+css代码

做响应式网站一般使用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;}

显示效果如下：

手机端