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