当前位置:学习126网 » 网站建设 » 利用CSS控制内容分别在PC电脑端或者移动端单独显示方法

利用CSS控制内容分别在PC电脑端或者移动端单独显示方法

54 人参与  2021年04月15日 19:51  分类 : 网站建设  评论

今天有一个网友希望老蒋给予提供一些帮助,这位同学做的网站希望在主题中加入广告代码,让在移动端显示,但是不在PC电脑端显示。据说已经耗时两小时找遍网上的代码并没有解决问题。开始我也想到去用JS代码判断用户客户端,然后给予分别显示,感觉那太麻烦了,何不直接用CSS来控制呢?

比如我们想象一下,如果显示器低于某个尺寸,然后我们就判断是移动端,然后就让显示,如果超过这个尺寸就判断是电脑端让不显示。反正他是要让移动端显示,这样就不要用复杂的JS代码判断。

第一、仅在移动端显示

<div class="onlywap">移动端显示的广告</div>

<style>
.onlywap{display: inline;}
@media (min-width: 950px){.onlywap{display:none;}}
</style>

第二、仅在电脑端显示

<div class="onlymobile">电脑端端显示的广告</div>

<style>
.onlymobile{display: none;}
@media (min-width: 950px){.nonlymobile{display:inline;} }
</style>

反正这个网友测试是可以使用的。

来源:微商学习网(微信/QQ号:),转载请保留出处和链接!

文章部分内容来自互联网整理,仅供个人学习参考,如有侵权,请联系删除!

本文链接:https://www.xuexi126.com/wzjs/22509.html

<< 上一篇 下一篇 >>

新手怎么做微商 | 微商代理什么比较好 | 网站地图

鲁ICP备15033820号-6