有一些广告位或者友情链接以及特定的模块想要实现PC端显示，移动端隐藏功能，通过代码该如何实现呢，下面通过友情链接模块来进行举例，友情链接每个站点基本都有，但是几十个友情链接如果在移动端展示的话会非常的丑，通常我们都会将移动端的友情链接隐藏起来。网上的文章很多，大部分写的都是通过以下方法实现：

1、CSS控制判断实现移动端隐藏方法代码：

CSS

　　@mediascreenand(max-width:1200px){.link,{display:none;}

ps：1200px表示屏幕大于1200像素会显示，小于则隐藏。

2、需要隐藏区域加一个div盒子，代码如下：

Markup

这里就是隐藏内容

ps：.link是一个值class是选择器，class”值”使用方法.值。

3、css选择器我在分享几个常用的吧，方便大家选择使用

id”值”使用方法#值

class”值”使用方法.值

子元素使用方法div>em

具体数值可以自行调试，一般需要隐藏的内容都有本身的class值或其他，没有的话我们就自己添加个div盒子，使用前先把css判断代码放进去，当然多个隐藏内容调用方法{.z556,.z557,.z558,{display:none;}以此类推。

讲的非常的详细，但是将代码复制到自己的文章中，发现根本没有作用，下面是博主亲自实践试用的正确方法：

CSS判断控制路:

   .link{display: block;}

@media (max-width: 767px) {.link{display: none !important;}}

在需要隐藏的区域加一个DIV，代码如下：

   <div class=”link”>你要css判断隐藏的内容</div>

在窗口大小超过767px会显示，小于则会自动隐藏。

转载请注明：令升网络 » 自适应网站如何实现pc端显示移动端隐藏