51工具盒子
回顾上篇文章：Google AdSense：展示广告单元的自适应行为简介，今天我们继续分享关于自适应代码：Google AdSense：如何修改自适应广告代码。一起往下看吧！
如果您发现我们的自适应广告代码无法满足您的所有需求，则不妨修改广告代码，更好地满足自适应网站的需求。下面这些示例将向您说明如何正确地进行此类修改：
重要提示：
-
如果您希望修改自己的广告代码，但刚刚接触 CSS 媒体查询，建议您首先查看针对不同屏幕宽度设置确切广告单元尺寸的示例。
-
如果您希望修改自己的广告代码，并且已经非常熟悉 CSS 媒体查询，那么您可以直接阅读自适应广告代码高级功能示例部分。
注意：本文中介绍的示例均为对 AdSense 广告代码的可接受修改。只要是按照这些经过批准的方式修改自适应广告代码，就不会违反 AdSense 合作规范。
{#exact}针对不同屏幕宽度设置确切广告单元尺寸的示例
此示例将向您介绍如何修改自适应代码才能为三类屏幕宽度（即移动设备、平板电脑和桌面设备）设置具体的广告单元尺寸。即使您以前没有任何 CSS 媒体查询或是 AdSense 广告代码修改经验，也可以理解此示例。
下面是一段修改后的自适应广告代码，这段代码会为每种屏幕宽度设置下列确切的广告单元尺寸：
-
宽度不超过 500 像素的屏幕：320x100 广告单元。
-
宽度在 500 像素到 799 像素之间的屏幕：468x60 广告单元。
-
宽度在 800 像素以上的屏幕：728x90 广告单元。
<style>
.example_responsive_1{ width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1{ width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1{ width: 728px; height: 90px; } }
</style>
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456"
crossorigin="anonymous"></script>
<!--example_responsive_1-->
<ins class="adsbygoogleexample_responsive_1"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
针对您自己的网站调整此示例代码：
-
在您的 AdSense 帐号中创建一个展示广告单元，确保"广告尺寸"部分中的自适应选项保持选中状态。记下自适应广告代码中的以下信息：
-
发布商 ID，例如 ca-pub-1234567890123456
-
广告单元 ID (
data-ad-slot)，例如 1234567890。
-
-
在示例代码中：
-
您的唯一名称只能包含英文字母 (A-Z)、数字和下划线，且第一个字符必须是英文字母。
-
您每次调整此示例代码时都必须使用不同的唯一名称。
-
将所有的
example_responsive_1都替换为唯一名称，例如 Home_Page、front_page_123 等。 -
您的唯一名称只能包含英文字母 (A-Z)、数字和下划线，且第一个字符必须是英文字母。 您每次调整此示例代码时都必须使用不同的唯一名称。
-
将
ca-pub-1234567890123456替换为您自己的发布商 ID。 -
将
8XXXXX1替换为您自己的广告单元 ID。
-
-
决定您希望广告单元在每类屏幕宽度上占据的尺寸：
-
将
320px和100px替换为您希望为宽度不超过 500 像素的屏幕使用的广告单元的宽度和高度。 -
将
468px和60px替换为您希望为宽度在 500 像素和 799 像素之间的屏幕使用的广告单元的宽度和高度。 -
将
728px和90px替换为您希望为宽度超过 800 像素的屏幕使用的广告单元的宽度和高度。
-
如果您希望采用示例代码中现有的广告单元尺寸，则不需要做出任何额外更改。
-
如果您希望根据具体屏幕尺寸设置不同的广告单元尺寸，请在示例代码中进行以下操作：
-
-
复制修改后的广告代码，并将其粘贴到您希望展示广告的网页的 HTML 源代码中。
注意：放置广告代码后，我们建议您在不同的设备和屏幕上测试您的广告，确保自适应功能正常工作。
{#adv}自适应广告代码高级功能示例
如果您发现我们的自适应广告代码无法满足您的所有需求，则不妨修改广告代码，通过 CSS 指定广告单元的确切尺寸。
注意：除非您对修改广告代码非常有把握，否则我们不建议您使用这些高级功能。
指定可展开宽度和固定高度
您可以修改自适应广告代码，通过 CSS 指定广告单元的可展开宽度和固定高度。以下示例显示如何进行修改：
高度固定的可展开宽度示例{#expand}
下面的示例展示了如何修改自适应广告代码，以指定 90 像素的固定高度和 400 像素（最小宽度）到 970 像素（最大宽度）的可变宽度：{#expand}
{#expand}
<ins class="adsbygoogle"
style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
{#expand}
根据屏幕宽度指定确切尺寸
您可以修改自适应广告代码，通过 CSS 指定广告单元的确切尺寸。以下示例显示如何进行修改：
根据屏幕宽度指定确切尺寸的示例{#exact}{#expand}
{#exact}
如果知道在每种设备上最适合您的自适应网站的确切广告单元尺寸，则您可以使用 CSS3 媒体查询来设置自适应广告单元的尺寸。以下示例展示了如何修改广告代码以使用 CSS3 媒体查询：
{#exact}
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:block;"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media 规则是一种 CSS3 语法，当前所有主流浏览器均支持这种规则。请注意，目前尚未正式支持通过 CSS 在外部样式表中设置广告单元的尺寸。
隐藏广告单元
在某些情况下，尤其是在较小的移动设备上，您可能完全不打算展示广告。如果您确实希望隐藏广告单元，可以使用 CSS 媒体查询来设置参数，确保不发出广告请求且不展示广告。以下示例显示如何进行修改：
针对特定屏幕尺寸隐藏广告的示例
如果您只想针对某些屏幕尺寸展示广告，请使用 CSS 来实现这一目标。以下示例显示如何修改广告代码，以使用 CSS3 媒体查询针对特定屏幕尺寸隐藏广告：
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
{#exact}在此例中，如果屏幕宽度少于 400 像素，则不会展示任何广告。
