Code前端首页关于Code前端联系我们

如何用CSS控制哪些内容分别在PC或手机上显示

terry 2年前 (2023-09-27) 阅读数 79 #数据结构与算法

网站希望在主题中添加广告代码,使其可以在手机上显示,但不能在PC上显示。据说我在网上找了两个小时的代码,但没有解决问题。一开始我也想过用JS代码来定义用户客户端,然后单独显示。我就觉得很麻烦。为什么不直接用CSS来控制呢?

举个例子,我们假设显示器低于某个尺寸,那么我们就会判断它是移动终端,然后进行显示。如果超过这个大小,我们就会判断它是电脑终端,不显示。反正都是想在移动端显示的,所以不需要用复杂的JS代码来判断。

初期仅在移动端展示

移动端展示的广告


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

第二,仅在电脑端显示

广告电脑端到端显示


.onlymobile{display: none;}
@media (min-width: 950px){.onlymobile{display:inline;} }

无论如何,这个网友测试有效。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

热门