利用CSS控制图片、广告等DIV层在PC端和移动端显示与否

由于现在大家上网的设备多种多样，有超大屏的电视、投影，有普通屏的个人PC电脑，有手机有ipad平板，可谓五花八门，所以为了保持网页在各种设备上的正常显示，响应式界面设计就随之应运而生。

不过应用了响应式模板的网站，往往会头疼，比如说图片或者广告的尺寸大小是固定死的，大图片到了小屏幕设备或者小图片到了大屏幕设备上都会出现显示错位或者拉伸的不正常现场。那么，我们就可以考虑，是不是可以让图片、广告等元素在我们需要显示的时候就显示，不需要的时候就不显示呢。比如说大尺寸的图片、广告在大屏幕设备上，如PC电脑等大屏幕上显示，在手机等移动端上不显示。要实现此项功能，我们需要利用CSS的媒介类型@media功能来进行定义。  更多关于 可以来这里学习下 http://www.runoob.com/cssref/css3-pr-mediaquery.html

<div class="no-pc">
本文只在移动端显示，不在PC端显示
<style>
 .no-pc{display: inline;}
 @media (min-width: 960px){
 .no-pc{display:none;}
 }
 </style>
</div>

大家可以复制以上代码，在自己的网页里面试一下，其中min-width:960px，定义的就是在显示屏幕宽度不低于960像素的屏幕上不显示，而在其他像素范围内显示。

同样的道理，我们将代码反过来，定义的就是在显示屏幕宽度不低于960像素的屏幕上显示，而在其他像素范围内不显示。

<div class="no-mobile">
本文只在PC端显示，不在移动端显示
<style>
 .no-mobile{display: none;}
 @media (min-width: 960px){
 .no-mobile{display:inline;}
 }
 </style>

做好了个二维码只在电脑上显示，手机上不显示！ 手机上还要什么二维码 =.=

快来测试下吧！   2018深圳世界之窗年卡