Adsense: banners adaptables con CSS

Aprovechando el nuevo «bloque de anuncios adaptable» de Adsense, os muestro la forma de mostrar diferentes tamaños del mismo banner adsense en función de la resolución de la pantalla solo con CSS, usando media queries (nada de javascript).

En el panel de Adsense creamos un nuevo bloque de anuncios, y seleccionando el que se llama: «bloque de anuncios adaptable»:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle banner_1"
    style="display:block"
    data-ad-client="ca-pub-2638586827597767"
    data-ad-slot="4549754506"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Y le añadimos una determinada clase (en este ejemplo: banner_1)

A continuación es ya solo jugar css y media queries para determinar el tamaño del banner para las diferentes resoluciones que quieras, un ejemplo:

.banner_1 {
    width: 300px;
    height: 600px;
}
@media screen and (max-width: 1024px) {
    .banner_1 {
        width: 300px;
        height: 250px;
    }
}
@media screen and (max-width: 768px) {
    .banner_1 {
        width: 200px;
        height: 200px;
    }
}