Inserção baseada no tamanho da tela

[UMARIZAL 1]

Olá amigos!

 

Uso o Revive Adserver (versão opensource do antigo PhpAdsNew e OpenX).

 

Nele, crio banners de tamanhos diferentes para diversos anunciantes, que estarão ligados a zonas com tamanhos definidos, assim, cada banner aparecerá na zona com o tamanho equivalente ao do banner.

 

Para definir a aparição nas áreas do site, basta eu inserir o código da zona na área onde desejo que os banners de tal tamanho sejam exibidos.

 

Mas com os sites responsivos, fica complicado exibir um tamanho fixo de banner a todo instante, sem saber o tamanho da tela, até porquê o design do site se adapta a ela e um banner grande demais poderá "quebrar" o layout ou ficar com a maior parte escondida.

 

Então, não sei como fazer, mas gostaria de poder definir, através de algum código, algo assim:

1. Para telas com 1024 pixels ou mais de largura, exibir a zona A;

2. Para telas até 800 pixels de largura, exibir a zona B;

3. Para telas com 480 pixels ou menos de largura, exibir a zona C.

 

Onde definirei a zona A com banners grandes, a zona B com banners médios e a zona C com banners pequenos.

 

Conseguiram entender?

 

Não faço a mínima ideia de como fazer isso, se é através de HTML ou Javascript... alguém sabe e poderia me ajudar?

[reebr 94]

Pode usar media queries, você pode definir classes e breakpoints nos quais mostra ou oculta um determinado elemento. Exemplo:

<div class='mostrar-tela-grande'></div>
<div class='mostrar-tela-pequena'></div>

.mostrar-tela-grande { display: block }
.mostrar-tela-pequena{ display: none  }

@media screen and (max-width: 480px) {
    .mostrar-tela-grande { display: none  }
    .mostrar-tela-pequena{ display: block }
}

http://jsfiddle.net/k3bLyeuk/

 

Lembrando que isso vai somente "esconder" o div, não vai impedir que ele seja carregado. Ele vai ser baixado, vai ser incluído na página, etc, só não será exibido.

[UMARIZAL 1]

Fico muito grato pela ajuda, mas não é bem isso que eu procurava...