1

Tenho dois links CSS no meu site: O layout normal, e as "correções responsivas" com @media. Para fazer os testes com tamanhos diferentes de tela, estou usando o Resposive Design Mode do Firefox. Quando fiz os calculos com @media para telas de 1920x900, tudo correu perfeitamente. Porém, com os calculos para tela de 1280x600, não está funcionando. Ele mantém todos os tamanhos descritos em 1920x900. Porém, quando escrevo outros atributos, ele funciona corretamente. Aqui vai meu código com comentários para melhor compreensão:

/* Para monitores 1280x600px */
@media screen and (max-height: 600px){
    /* Da forma que está, não funciona, ele continua pegando o height descrito em @media screen and (max-height 900ox). Porém, se eu troco este atributo por display:none; ele funciona. */
    #slider{
        height:73.5vh;
    }
}

@media screen and (max-width: 1280px){
    #mainAtc{
        margin-left:2vw;
    }

    #othAtc{
        margin-left:0;
    }
}

/* Para monitores 1920x900px */
@media screen and (max-height: 900px){
    /* Da mesma forma, se eu trocar o atributo para telas 1280x600 para display:none, e trocar o atributo para telas de 1920x900 para display:block, ele mostra as imagens, como se nao funcionasse quando os atributos são iguais */
    #slider{
        height:51.6vh;
    }
}

@media screen and (max-width: 1920px){
    #mainAtc{
        margin-left:2vw;
    }

    #othAtc{
        margin-left:7.6vw;
    }

    #atcRest{
        margin-left:2vw;
    }
}

Quem puder me ajudar, eu agradeço demais. Obrigado.

2
  • Deixe me ver se entendi: A posição dos elementos id #mainAtc, #othAtc e #atcRest está mudando corretamente, mas a altura do elemento #slider parece que não muda, é isto?
    – fbiazi
    Commented 29/07/2015 às 1:54
  • Consegui a resposta sozinho e respondi a pergunta, obrigado pela ajuda ! Commented 29/07/2015 às 3:19

2 Respostas 2

1

Bastava acrescentar um valor mínimo. Como o tamanho do monitor era menor ou igual a 600 e 900px (ambas as medidas calculadas) ele executav as duas tarefas. pois então fiz o tratamento da seguinte forma: @media screen and (min-height: 601px) and (max-height:900px), desta forma o problema foi solucionado.

0

O tamanho da resolução com o @media é usado para a largura, ou seja, "width". O min-height não existe, pois "height" é altura. Em resumo, voce so pode usar max-width, jamais max-height pois este ultimo, não existe e por isso, não vai funcionar. Substitui o 'min-height' por 'min-width' e o 'max-height' por 'min-width' que vai funcionar.

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 14/03/2022 às 17:18

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 .