【原创】自适应模版隐藏显示层实例教程

来源:互联网   编辑:思良  发表时间:2020-02-15  关注度:4043  

思良:这个模版是我给朋友私人定制的,就不发布出来了!

在给朋友做网站QQ客服时出现的问题,因为申请的QQ弹窗代码,只给了PC端的代码,如果在手机上点QQ,不能打开手机QQ对话框的,我们在做WAP模版时就知道了,普通PC端代码,直接用<a>表示超级链接就可以打开链接,如果超链接是手机号码时,手机上点击超链接并不能弹出拨号界面的,必须是telephone:这样的代码,所以QQ弹窗代码一样,手机端必须是手机端的代码

于是找PC端QQ弹窗代码:<a href="tencent://message/?uin=56277309&amp;Site=桑客游&amp;Menu=yes" target="blank">电脑QQ聊天</a>

和手机端代码:<a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=56277309&amp;version=1&amp;src_type=web&amp;web_src=oicqzone.com" target="blank">手机QQ聊天</a>

如果我们做自适应模版时,为了美观不可能显示2个qq弹窗的,怎么解决了?我们可以做两个层,分别放置不同端的代码,在CSS里设置好,如果是在PC访问时,我们就只显示PC端代码的层,而手机端代码的层就隐藏,手机访问时相反,一般自适应模版就是按分辨率来判断的,所以找到对于的分辨率,添加这两个层的隐藏显示属性即可,具体怎么操作:

先各自添加一个层:

<div class="pcqq"><a href="tencent://message/?uin=209761549&amp;Site=桑客游&amp;Menu=yes" target="blank"><span class="circle">电脑QQ聊天</a></div>

 <div class="sjqq"><a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=209761549&amp;version=1&amp;src_type=web&amp;web_src=oicqzone.com" target="blank">手机QQ聊天</a></div>


接着去CSS里,先在主体CSS添加:

.sjqq{ display:none;} /* 先隐藏手机端的层  */

接着找到下面@media (min-width: 768px) and (max-width: 979px) {/*  即小于979分辨率就显示手机端的层  */

.pcqq{ display:none;} /* 隐藏PC端的层  */

.sjqq{ display:block;} /* 显示手机端的层  */

如果不行,就在更小的分辨率里添加,比如@media only screen and (max-width: 479px) {


看下实例图片效果:

PC访问:

image.png

手机访问:

image.png

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:帝国cms内容页某个字段没有填写就不显示的解决方法,含实例


上一篇:帝国cms更换至php7环境,网站后台不能登录的解决方法


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信