表示する端末毎に異なるサイズの広告を表示したいといった要望をよく聞きます。 スマートフォンのファーストビューを考慮して大型広告の表示を避けるケースや、大型広告の重複表示を避けるケース、正方形広告を並列で並べるケース等々色々あると思います。

そのような場面ではレスポンシブ広告のサイズチューニングが有効です。

画面サイズ毎の広告サイズを指定する

広告ユニット上部に数行のCSSを加えるだけで対応できます。

<style type="text/css">
.adslot_test { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_test { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_test { width: 728px; height: 90px; } }
</style>

.adslot_testという名称は'.adslot_' + 'ユニット名'という命名規則で指定しました。 適当に.adslot_01としても構いません。

広告ユニットが複数ある場合はこれらの名称が重複しないように注意しましょう。

二行目の.adslot_test { width: 320px; height: 100px; }という部分でベースとなる広告サイズを明示しています。

三行目の@media (min-width:500px)...の部分では画面サイズが500px以上（タブレット等）の場合に表示する広告サイズを指定します。

四行目の@media (min-width:800px)...は画面サイズが800px以上（PC等）の場合の広告サイズとなります。

より細かな画面サイズ対応を行いたい場合は@media (min-width:1000px)...と言った形で同等のコードを追加していきます。

メディアクエリ（@media）に対応していないIE等の古いブラウザでは２行目の設定のみが有効となります

指定可能な広告サイズ

上記CSSのwidthとheightに指定できるサイズとその組わせは以下の公式ページにリストアップされています。

https://support.google.com/adsense/answer/6002621?hl=ja

参考までに300×250サイズの広告を利用する場合は「.adslot_test { width: 300px; height: 250px; }」というコードを利用することになります。

広告をサイドバーに配置した場合には縦長広告が優先的に表示される場合があります。問題への対処方法は以下のページを参考にしてください。
レスポンシブ広告ユニットを最適化する ~広告形状編~

設定例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test_unit -->
<style type="text/css">
.adslot_test { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_test { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_test { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_test"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>