1

Bom Dia,

Estou com um problema com algumas media queries comecei fazendo as media queries na parte de desktop com as seguintes medidas que funcionaram perfeitamente:

1024x600 
1024x768 
1280x768 
1440x900
1600x900 
1680x1050 
1920x1080    
1920x1200

abaixo tem um exemplo de como utilizei uma delas:

@media screen and (max-width: 1024px) , screen and (max-height: 600px){
...
}

Essas media query estavam funcionando. Porém quando comecei a fazer as media queries para tablets as de desktops bagunçaram não sei porque abaixo estão as medidas que usei para as media queries:

533x853
600x800
600x1024
603x966
768x1024
800x1280

Abaixo esta o código CSS que usei:

@media only screen and(min-width:603px),(min-height: 966px){
...
}

Só lembrando que as media queries de desktops estão em um arquivo separado das do tablet.

segue abaixo minha media queries referente a do desktop:

@media screen and (max-width: 1024px) , screen and (max-width: 600px){

    #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;
    }

    .image.ico {

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

    #fundo-transparente-icones{
        left: -300px;
        top: 90%;
        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: 330%;
        transform:scale(0.6);
    }

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



    #footer .copyright {
        left: 38%;
    }
}


@media screen and (min-height: 768px){
    #fundo-transparente-parcerias{
        left: -300px;
        top: 250%;
        transform:scale(0.6);
    }

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

}

/*notebook 13 polegadas*/
@media screen and (min-width:1280px),(min-height: 800px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 85%;
            transform:scale(0.7);
        }

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

}

@media screen and (max-width:1366px),(max-height: 768px){
    /*    #fundo-transparente-icones{
            left: -180px;
            top: 90%;
            transform:scale(0.7);
        }

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

}

@media screen and (max-width:1440px),(max-height: 900px){
    #menu ul {
        left: 26%;
    } 
}

@media screen and (min-width:1600px),(min-height: 900px){
    #menu ul {
        left: 32%;
    } 

    .setas{
        position: absolute;
        top: 60px;
        left: 14%;
    }
}


@media screen and (max-width:1680px),(max-height: 1050px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 15%;
    }
}

@media screen and (min-width:1920px),(min-height: 1080px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
    }

    #bg-video{
       width: 100%;
    }

     .setas{
        left: 18%;
    }
}

@media screen and (min-width:1920px),(min-height: 1200px){
    .botaozao input[type="button"],.jogos-botao{
        margin-left: 13%;
    }

    #bg-video{
       width: 100%;
    }

     .setas{
        left: 18%;
    }
}

e também a minha media queries do tablet que esta bagunçando minha media queries do desktop:

@media screen and(max-width:533px),(max-height: 853px){
    #menu ul {
        left: 5%;
    }

    #menu ul li a{

        font-size: 1.2em;
        margin: 4px;
    }

    #seta-esquerda{
        right: 35px;
    }

    #seta-direita{
        left: 35px;
    }

    video {
        transform:scaley(3.4);
    }

    .nomes{
        font-size: 4.3em;
        margin-top: 200px;
    }

    .texto1 {
        font-size: 1em;
    }

    .image.ico {

        margin: 0 0 1em 0;
        width: 50%;
        margin-left: 175px;
        margin-top: 100px;
    }

    .image.ico img {
        width: 60%;
    }

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

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }

    .main .jogos-nomes{
        margin-top: 50px;
        font-size: 3.5em;
    }

    .texto-jogos{
        text-align: left;
        font-family: Gabriola;
        font-size: 1em;
        margin-top: 120px;
        margin-left: 40px;
    }

    .main {
        padding: 6em 0 4em 0;
    }



    .main.style2 {
        background-color: #333;
        color:#fff;
        background-size: 100% 100%;
        height: 600px;
        opacity: 0.95;
        border-bottom: 15px solid #f80;
        border-top: 15px solid #f80;

    }

    .main.style2{
        background-repeat: no-repeat;

    }

    .botaozao input[type="button"],.jogos-botao{
        background-color: transparent;
        color: #fff;
        width: 250px;
        height: 50px;
        border:3px solid #fff;
        text-align: center;
        margin-left: 20%;
        margin-top: 30px;   
        border-radius: 6px;
        font-family: Gabriola;
        font-size: 1.7em;

    }

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

}

@media screen and(max-width:600px),(max-height: 800px){
    #menu ul {
        left: 10%;
    }

    .image.ico {
        margin-left: 200px;
        margin-top: 100px;
    }

    .container > p{
        text-align: center;
        font-family: Gabriola;
        font-size: 1em;
    }
}


@media screen and(min-width:600px),(min-height: 1024px){
    #menu ul {
        left: 5%;
    }


    #seta-esquerda{
        right: 30px;
    }

    #seta-direita{
        left: 30px;
    }

    .setas{

        left: -1%;
    }

    video {
        transform:scaley(3);
    }

    .image.ico {
        margin: 0 0 1em 0;
        width: 50%;
        margin-left: 200px;
    }

    .image.ico img {
        width: 60%;
    }

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

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }

    .main .jogos-nomes{
        margin-top: 50px;
        font-size: 3.5em;
    }

    .texto-jogos{
        font-size: 1em;
        margin-top: 120px;
        margin-left: 40px;
    }

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

    }

}


@media screen and(min-width:603px),(min-height: 966px){
    #menu ul {
        left: 5%;
    }


    #seta-esquerda{
        right: 30px;
    }

    #seta-direita{
        left: 30px;
    }

    .setas{

        left: -1%;
    }

    video {
        transform:scaley(3);
    }

    .image.ico {
        margin: 3em 0 1em 0;
        width: 50%;
        margin-left: 200px;
    }

    .image.ico img {
        width: 60%;
    }

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

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }

    .main .jogos-nomes{
        margin-top: 50px;
        font-size: 4em;
    }

    .texto-jogos{
        font-size: 1em;
        margin-top: 120px;
        margin-left: 40px;
    }

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

    }
}


@media screen and(min-width:768px),(min-height: 1024px){
    #menu ul {
        left: 15%;
    }

    video {
        transform:scaley(3);
    }

    .image.ico {
        margin: 3em 0 1em 0;
        width: 50%;
        margin-left: 265px;
    }

    .image.ico img {
        width: 60%;
    }

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

    #fundo-transparente-icones{
        position: absolute;
        left: -180px;
        top: 80%;
        transform:scale(0.8);
        z-index: -200;
    }

    .main .jogos-nomes{
        margin-top: 50px;
        font-size: 4.5em;
    }

    .texto-jogos{
        font-size: 1.2em;
        margin-top: 120px;
        margin-left: 40px;
    }

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

    }

}
5
  • 2
    Só uma dica: Não confunda "design" com "designer". Commented 16/04/2015 às 14:37
  • ok! obrigado pela dica. Commented 16/04/2015 às 14:42
  • Cuidado que com width de 800px por exemplo entras nas duas media query
    – Jorge B.
    Commented 16/04/2015 às 14:48
  • Era mais fácil se explicasses o que queres fazer e o que tens dentro das media query
    – Jorge B.
    Commented 16/04/2015 às 14:49
  • "ah" sim irei editar a pergunta agora mesmo um instante Commented 16/04/2015 às 14:50

2 Respostas 2

2

Kirito o problema está fácil de ver, algumas resoluções de ecrã acabam por entrar nas duas media.

Por exemplo, 1680x1050 e 768x1024 encaixam as duas na media query:

@media only screen and(min-width:603px),(min-height: 966px){
...
}

Porque ao definires um min-width:603px estás a dizer que todas as resoluções de ecrã com mais de 603px têm de obedecer as regras dentro desse media e, por isso, no caso da resolução de ecrã 1680x1050 entram nas duas media.

11
  • 1
    Nossa amigo bem sacado não tinha percebido isso irei testar agora mesmo e já te dou um retorno Commented 16/04/2015 às 16:11
  • ola amigo testei aqui e não funcionou acho que não estou fazendo certo irei postar o meu cédigo desktop e tablet para você poder dar uma olhada. Commented 16/04/2015 às 16:21
  • Acho é que não estás a entender o funcionamento disso tudo. Por exemplo se queres que num ecrã de 533x853 se comporte de uma forma que pretendes tens de fazer assim: @media screen and (max-width: 533px) , screen and (max-height: 853px){ //código para essa largura de ecrã}
    – Jorge B.
    Commented 16/04/2015 às 16:25
  • 1
    acho que agora vai funcionar Commented 16/04/2015 às 17:21
  • 1
    funcionou obrigadooo Commented 17/04/2015 às 11:11
0

Se adicionar um max-width, quem sabe resolva seu problema...

@media only screen and (min-width : 603px) and (max-width : 1024px) {
     codigo......
}
1
  • "hmm" mais vou testar só que e o meu max-height onde ele fica eu preciso dele mais irei testar isso agora. Commented 16/04/2015 às 14: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 .