1

Fiz essas medias queries para Desktop, segue o código abaixo:

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

    #menu ul {
        left: 26%;
    }
    .nomes{
        margin-top: 200px;
    }

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

    #header {
        height: 100%;
    }

    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: 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-width:1024px),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);
    }

}


@media screen and (min-width:1280px),screen and(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 (min-width:1366px),screen and(min-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 (min-width:1440px),screen and(min-height: 900px){
    #menu ul {
        left: 26%;
    } 
}


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

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

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

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

    #bg-video{
       width: 100%;
    }

    video {
        transform:scaleY(1.8);
        transform: scaleX(1.2);
    }

     .setas{
        left: 18%;
    }
}

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

    #bg-video{
       width: 100%;
    }

     .setas{
        left: 18%;
    }
}

Porem quando fui fazer para tablets, elas simplesmente não implementam, antes ela bagunçava todas as media queries que eu já havia feito que tive uma resolução disso em um tópico anterior porem agora não quer aplicar. Segue abaixo um dos códigos da medida que não aplica:

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

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

} 

2 Respostas 2

3

media screen serve para Desktop (e nexus) só, está aqui uma lista de todas as media-queries espeficicas que podes usar no entanto, se usares só @media (max-width:NNpx) ela irá funcionar sem grande problema :)

1
  • poxa amigo obrigado pela resposta ai "rsrs" nunca imaginaria que funcionasse assim. 20/04/2015 às 17:15
3

Já tentou assim @media (max-width:533px) ? Caso não dê certo, so vendo o estilo completo para poder indicar algo.

1
  • obrigado você também pela ajuda marquei o dele como resposta porque ele respondeu primeiro mais muito obrigado também pela ajuda 20/04/2015 às 17:16

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 .