松江生活网全新改版为令升网络,网址不变,QQ群不变(群1:171943922,群2:283136722)!

自适应网站如何实现pc端显示移动端隐藏

SEO技术 lingsheng 1201℃ 0评论

有一些广告位或者友情链接以及特定的模块想要实现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端显示移动端隐藏

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址