互联网知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

在其他网站添加了在线客服代码 手机版怎么隐藏

作者:狐灵科技 | 2019-12-31 14:47 |点击:

在给客户做网站建设当中  有时候需要从其他素材网站添加在线客服代码 添加后 发现 如果是响应式的网站  手机上也会有

手机上本身底部就有  再或者在线客服太大 比较占空间

怎么让手机版隐藏呢  其实原理很简单

我们只要判断下屏幕大小 让小屏幕不显示即可

这里响应式全局样式用的是 bootstrap   这里和用的什么全局css样式没有关系的

写下在屏幕 小于768就不显示




 
.logo {
display: block;
margin: 0 auto;
max-width: 310px;
margin-top: 18px;
margin-bottom: 15px
}
 
#hlwlyincang {
display: none
}
 
  1.  
  2. @media screen and (max-width:768px) {

 
注意看橙色的代码   中间的#hlwlyincang 就是隐藏

然后前台这样写



 
  1. <div id="hlwlyincang">
    <!---中间写想要在屏幕小的情况下 不显示的代码-->
    </div>
     

这样就可以了

如果弄不清为什么要用id 不是.hlwlyincang 可以查看这篇文章
狐灵科技为你讲解CSS中#和.的区别




响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

有针对性的使用这类工具类,从而避免为同一个网站创建完全不同的版本。相反,通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类

通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

  超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.visible-xs-* 可见
.visible-sm-* 可见
.visible-md-* 可见
.visible-lg-* 可见
.hidden-xs 可见 可见 可见
.hidden-sm 可见 可见 可见
.hidden-md 可见 可见 可见
.hidden-lg 可见 可见 可见

从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block.visible-xs-inline 和 .visible-xs-inline-block

.visible-xs.visible-sm.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。


如没特殊注明,文章均为狐灵科技原创,转载请注明  https://www.hulingweb.cn/hulianwang/784.html
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218