Inserção de código HTML baseada no tamanho da tela

[UMARIZAL]

Olá amigos!
 
Uso o Revive Adserver (versão opensource do antigo PhpAdsNew e OpenX) para controlar a publicidade em meus sites.
 
Nele, crio banners de tamanhos diferentes para diferentes anunciantes e que serão exibidos em sites diferentes.
 
Estes banners estã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 de cada 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?

[DiF]

@UMARIZAL

 

Basicamente você vai manipular com CSS3 e média queries.

Como a responsividade é adquirida ao definir uma folha de estilo que envolva media queries.. é o que você precisa fazer.

 

então um exemplo simples:

@ MEDIA screen and (max-width: 300px) {    body {        background-color: lightblue;    }}

PS: o Arroba deve ficar junto da palavra media. coloquei separado para não conflitar com o recurso mention daqui do fórum

 

Linha 1 e 5. chamada do media querie e definição do tamanho máximo da tela do dispositivo.

Linha 2, 3 e 4, regra css 

 

Com isso sempre que for aberto com dispositivo que tenha tamanho máximo de 300px por exemplo vai mostrar um background de cor azul claro.

Com base nisso você pode então definir várias regras para dispositivos de 1024, 800 e 480px

 

Referência para estudo:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 

http://tableless.com.br/introducao-sobre-media-queries/

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries