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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 896 天前的主题，其中的信息可能已经有所发展或是发生改变。

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; } }

5 条回复 • 2022-05-27 22:45:53 +08:00

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">...

瞎说的，试一下再说