2

Estou com problemas na parte de layout responsivo, estou querendo trabalhar de começo com os seguintes tamanhos:

1280 x 1024
1024 x 768
768 x 1024
480 x 320
1680 x 1050 
1024 x 600 

Porém, eu já havia aberto um outro tópico referente a isso. Só que aconteceu um problema diferente. Eu consegui fazer a minha media queries com os seguintes tamanhos:

1024x768, 768x1024 e 1024x600

Segue uma das minhas medias queries:

@media (max-width: 1024px) and (max-height: 768px){
    #menu ul {
        left: 26%;
    }

    .nomes{
        margin-top: 200px;
    }

    .botao-circulo{
        margin-top: 50px;
        margin-left:-15px;
    }

    #header {
        height: 750px;
    }

    video {
        transform:scaley(1.8);
    }


    #bg-video{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;
        /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
    }

    .image.ico {

        margin-left: 70px;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -300px;
        top: 70%;
        transform:scale(0.6);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 175%; 
    }

    .texto-jogos{
        margin-top: 200px;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }

    #fundo-transparente-parcerias{
        left: -300px;
        top: 257%;
        transform:scale(0.6);
    }

    #teamspeak-img{
        transform:scale(0.7);
        /*-webkit-filter:grayscale(100%);*/
        z-index: 2000 !important;
    }



    .team.style-team{
        background-repeat: no-repeat;

    }

    .botoes-team input[type="button"],.btn-sobre-team{
        background-color: transparent;
        color: #fff;
        width: 100px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: -9%;
        margin-top: 10px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;
        cursor: pointer;
    }
    .botoes-team input[type="button"]:hover,.btn-sobre-team{
        background-color: #fff !important;
        color: #333 !important;
        transition:0.5s !important;
        cursor: pointer !important;


    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }



    #footer .copyright {
        left: 38%;
    }

}

Essa é assim como as outras duas que mencionei, funcionam, lembrando que cada uma delas esta em um arquivo .CSS separado (tentei deixar em um único arquivo, porém o código não funcionava e só funcionou assim).

Mas aí quando tento fazer por exemplo a media query de 1680x1050, ela funciona normalmente. Porém as minhas outras medias queries que eu já havia feito param de funcionar. Não consigo compreender, alguém sabe o que é isso?

Segue a minha media query referente a esse tamanho:

@media (max-width: 1680px) and (max-height: 1050px){
    #menu ul {
        left: 28%;
    }

    .nomes{
        margin-top: 200px;
    }

    .botao-circulo{
        margin-top: 190px;
        margin-left:-15px;
    }

    #header {
        height: 925px;
    }

    video {
        transform:scaley(1.8);
    }


    #bg-video{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -50;
        /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
    }


    /*******************************************************************************

                               Icones

    *******************************************************************************/

    .image.ico {

        margin-left: 70px;
        margin-top: 100px;
    }

    #fundo-transparente-icones{
        left: -200px;
        top: 75%;
        transform:scale(0.7);
    }

    .botao-mais input[type="button"],.mais{
        margin-left: 175%; 
    }

    .texto-jogos{
        margin-top: 200px;
        margin-left: 50px;
    }


    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
        margin-top: 30px;   

    }

    .botaozao input[type="button"]:hover,.jogos-botao{
        background-color: #fff;
        color: #333;
        transition:0.5s;
    }


    /*******************************************************************************

                               Parcerias

    *******************************************************************************/
    #fundo-transparente-parcerias{
        left: -200px;
        top: 225%;
        transform:scale(0.7);
    }

    /*******************************************************************************

                                   Team Speak

    *******************************************************************************/

    #teamspeak-img{
        transform:scale(0.7);
        /*-webkit-filter:grayscale(100%);*/
        z-index: 2000 !important;
    }



    .team.style-team{
        background-repeat: no-repeat;

    }

    .botoes-team input[type="button"],.btn-sobre-team{
        background-color: transparent;
        color: #fff;
        width: 100px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: -9%;
        margin-top: 10px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;
        cursor: pointer;
    }
    .botoes-team input[type="button"]:hover,.btn-sobre-team{
        background-color: #fff !important;
        color: #333 !important;
        transition:0.5s !important;
        cursor: pointer !important;


    }

    .linha-team{
        width: 40%;
        margin-top: -10px;
    }



    #footer .copyright {
        left: 40%;
    }

}
6
  • 1
    Voce ja fez essa pergunta e já foi respondida pt.stackoverflow.com/questions/58524/design-responsivo Commented 15/04/2015 às 16:50
  • 1
    Não amigo eu abri um tópico perguntando como eu ultilizaria a media querie apara pode manipular a altura nao so o comprimento tanto e que em um dos comentarios eu mencionei isso agora a problema e esse que as medias que eu já consegui fazer com a solução do outro tópico não funcionam quando eu crio uma nova media com o valor de 1680x1050 um exemplo Commented 15/04/2015 às 16:55
  • Uma pergunta se é "responsivo" porque arquivos separados com medidas fixas? vale dar uma estudada num framework aqui tem um link com 20 webexpedition18.com/articles/… Commented 15/04/2015 às 17:07
  • trabalhr com media queries funciona mais da muito trabalho, vc ja pensou em usar um framework para controlar a responsividade? Eu tenho trabalhado muito com o bootstrap e tem me atendido bem. getbootstrap.com Commented 15/04/2015 às 17:17
  • e que não sei usar Commented 15/04/2015 às 17:24

1 Resposta 1

3

Se voce aplicar

@media (max-width: 1680px) and (max-height: 1050px){

Você pega todo mundo que vai de 0 a 1680px de largura e também todo mundo que vai de 0 a 1050px de altura. Ou seja, você pode estar sobrescrevendo o código escrito para as outras resoluções dependendo da ordem a qual está posicionando esse trecho em seu código.

Ou seja, você tem duas soluções possíveis:

  • Reorganizar seu código
  • Aplicar clausulas adicionais que definam um tamanho mínimo

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 .