通过 CSS 禁止显示屏幕小于 400PX 的屏幕显示广告

2022-05-27 15:18:01 +08:00
 Authorization
import React from 'react';

export default class Ad extends React.Component {
componentDidMount() {
((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({});
}

render() {
return (
<div className="flex">
<ins
className="adsbygoogle gri-bg"
style={{
display: 'inline-block',
width: '970px',
height: '60px',
margin: 'auto',
}}
data-ad-client="ca-pub-1880000000000"
data-ad-slot="12000000"
data-ad-channel="780000000"
/>{' '}
</div>
);
}
}

问题是我要把这段加进去怎么加?
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
1340 次点击
所在节点    程序员
5 条回复
learningman
2022-05-27 15:25:23 +08:00
你可以直接写在 style 里(
Authorization
2022-05-27 15:34:15 +08:00
@learningman 你可以帮我写出来吗?
learningman
2022-05-27 15:57:40 +08:00
@service517 你加一个元素
<style>.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }</style>
完事,能用
shaojz2005
2022-05-27 20:40:10 +08:00
另外写一个 css ,然后 import 这个 css ?
yankebupt
2022-05-27 22:45:53 +08:00
flex 和 adsbygoogle 很可能代码不能改,广告都是硬插进去的,不知道会不会检查外部 div 属性
写个 div 包起来用你那个 css 不知道会不会违规。
就 flex 外面再包个<div className="adslot_1">或者<div className="flex adslot_1">...

瞎说的,试一下再说

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/855689

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX