1

Boa tarde a todos, eu coloquei media query css3 para funcionar em um site com largura fixa, mas não funciona. Só funciona em sites responsivos?

http://bblender.com.br/clientes/moldin/

@media only screen and (max-width: 959px) {
.tit-h2{margin-left:2px!important;}
#rodape{
width: 104%;
height: 180px;
background: #F68624;
position: absolute;
bottom: 0;}}

Obrigado a todos.

1 Resposta 1

3

Você deve colocar a METATAG VIEWPORT no cabeçalho HEAD da página:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

OBS: Você pode modifica-lá a sua necessidade alterando o valor dos atributos:

  • width - Define uma largura para o viewport. Os valores podem ser em PX ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo.

  • height - Define uma altura para o viewport. Os valores podem ser em PX ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo.

  • initial-scale - Define a escala inicial do viewport.

  • user-scalable - Define a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.

Com CSS você só define os estilos para cada resolução.

A METATAG é para informar o dispositivo que a largura que ele deve usar é a largura que aparenta ter, e não a da resolução dele que é em PIXELS.

Você precisa utilizar CSS com MEDIA QUERIES e a METATAG VIEWPORT.

Recomendo que você comece a trabalhar com medidas relativas ao invés de fixas para trabalhar com layouts responsivos pois são mais adequadas.

3
  • resolvi, esta assim agora. @media only screen and (max-device-width: 959px) { .tit-h2{margin-left:2px!important;} #rodape{ width: 104%; height: 180px; background: #F68624; position: absolute; bottom: 0; } } 19/02/2015 às 16:18
  • Se utilizar assim (max-device-width: 959px), ele vai funcionar somente em devices. O monitor é um desktop, não um dispositivo mobile. Se você colocar só o min-width, max-width, ele irá atender a qualquer tipo de tela, não apenas a mobiles e por isso deve-se utilizar a metatag viewport.
    – user21847
    19/02/2015 às 16:27
  • Vlw pela dica, mas foi mesmo só neste caso especial que precisava ajeitar este detalhe do titulo. 20/02/2015 às 22:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .