Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
UMARIZAL

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

Recommended Posts

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Editado por dif
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×