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

2021-11-2807:35:17网页制作Comments1,684 views字数 487阅读模式

网站希望在主题中加入广告代码,让在移动端显示,但是不在PC电脑端显示。据说已经耗时两小时找遍网上的代码并没有解决问题。开始我也想到去用JS代码判断用户客户端,然后给予分别显示,感觉那太麻烦了,何不直接用CSS来控制呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

比如我们想象一下,如果显示器低于某个尺寸,然后我们就判断是移动端,然后就让显示,如果超过这个尺寸就判断是电脑端让不显示。反正他是要让移动端显示,这样就不要用复杂的JS代码判断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

第一、仅在移动端显示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

<div class="onlywap">移动端显示的广告</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

<style>
.onlywap{display: inline;}
@media (min-width: 950px){.onlywap{display:none;}}
</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

第二、仅在电脑端显示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

<div class="onlymobile">电脑端端显示的广告</div>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

<style>
.onlymobile{display: none;}
@media (min-width: 950px){.nonlymobile{display:inline;} }
</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

反正这个网友测试是可以使用的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/22715.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/22715.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定