Skip to main content
3 de 3
ajuste na formatação, no texto, e adicionado uma TAG.

Como eu trabalho com design responsivo?

Eu uso Media Queries, certo, e meu layout terá que se adaptar a diversos aparelhos como tablets, iphone, smartphones, notebook e TVs, porém eu encontrei um problema no tablet em modo paisagem, ele tem uma resolução aproximada de 1024x768, em notebook seria 1024x600. Eu uso Media Queries para o tablet correto e uso o max-width, só lembrando que fiz "desktop first", logo mais vou transformar ele em mobile só que não consigo diferenciar de um para outro. Os dois tem o mesmo width de 1024, somente o height que é diferente, e ai está o problema. Segue o modelo que fiz para a versão tablet.

@media (max-width: 1024px){
    
#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);*/
    }
    /******************************************************************************
                               Icones
     ******************************************************************************/
    .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;
    }
    /*******************************************************************************
                               Parcerias
    *******************************************************************************/
    #fundo-transparente-parcerias{
        left: -300px;
        top: 257%;
        transform:scale(0.6);
    }
    /*******************************************************************************
                                   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: 38%;
    }    
}

Só as medias iniciais básicas que eu pretendo usar:

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

E tenho mais um problema, fiz as Medias Queries para essa primeira resolução 1280x1024 e assim que fiz, as outras duas pararam de funcionar que foram a de 1024x768 e 768x1024.

Felipe Henrique
  • 2,1mil
  • 3
  • 25
  • 54