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

Design Responsivo Como eu trabalho com design responsivo?

Como eu trabalho com design responsivo?

Eu uso media queriesMedia Queries, certo, e meu layout terá que se adaptar a diversos aparelhos como tablets, iphone, smartphones, notebook e tvsTVs, 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 queriesMedia Queries para o tablet correto e uso o max-widthmax-width, so lembrando que fiz desktop first"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 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%;
    }
     
}
1280 x 1024
1024 x 768
768 x 1024
480 x 320
1680 x 1050
1024 x 600
  • 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 queriesMedias Queries para essa primeira resolução 1280x1024 e assim que fiz, as outras duas pararam de funcionar que foram a de 1024x768 e 768x1024.

Design Responsivo

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, so 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%;
    }
 
}
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.

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, 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%;
    }    
}
  • 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.

removeu 170 caracteres do conteúdo; tags editadas; título editado
Fonte Link
Rafael Withoeft
  • 2,3mil
  • 15
  • 31

desgnerresponsivo Design Responsivo

bom dia =3Como eu trabalho com design responsivo?

como que trabalho com designer responsido porque veja bem euEu uso o media queries certo e meu layout teraterá que se adaptar a diversos aparelhos como tablets iphne smartphines, iphone, smartphones, notebook e tvs porem, porém eu encontrei um problema no tablet em modo paisagem, ele tem um pxuma resolução aproximada de 1024x768 s w no1024x768, em notebook seria 1024 x 600 eu1024x600. Eu uso o media queries para o tablet correto e uso o max-width, so lembrando que fiz desktop firtsfirst, logo mais vou transformar ele eem mobile so que nao to conseguindonão consigo diferenciar de um para o outo os dois etemoutro. Os dois tem o width 1024 a tela fica certa mais comomesmo width de 1024, somente o heightheight que é diferente, e diferente ai daai está o problema na altura e nao to conseguindo arrumar isso sou novato na area segue um exemplo do. Segue o modelo que eu fiz para versaoa versão tablet.

so as medias iniciais basicas basicasbásicas que eu pretendo usar sao:

1280x1024 1024x768 768x1024 480x320 1680x1050 1024x600

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

entao e temE tenho mais umkum problema eu tbm, fiz uma media querieas medias queries para essa primeira resolucao 1280x1024resolução 1280x1024 e assim que eu fiz, as minhas outras duas medias queries pararam de funcionar que foram a de 1024x768 e 768x1024 se puderem me ajudar eu agradeceria sou novato na area de designer responsivo1024x768 e 768x1024.

desgnerresponsivo

bom dia =3

como que trabalho com designer responsido porque veja bem eu uso o media queries certo e meu layout tera que se adaptar a diversos aparelhos como tablets iphne smartphines notebook tvs porem eu encontrei um problema no tablet em modo paisagem ele tem um px de 1024x768 s w no notebook seria 1024 x 600 eu uso o media queries para o tablet correto uso o max-width so lembrando que fiz desktop firts logo mais vou transformar ele e mobile so que nao to conseguindo diferenciar de um para o outo os dois etem o width 1024 a tela fica certa mais como o height e diferente ai da problema na altura e nao to conseguindo arrumar isso sou novato na area segue um exemplo do modelo que eu fiz para versao tablet

so as medias iniciais basicas basicas que eu pretendo usar sao

1280x1024 1024x768 768x1024 480x320 1680x1050 1024x600

entao e tem mais umk problema eu tbm fiz uma media querie para essa primeira resolucao 1280x1024 assim que eu fiz as minhas outras duas medias queries pararam de funcionar que foram a de 1024x768 e 768x1024 se puderem me ajudar eu agradeceria sou novato na area de designer responsivo

Design Responsivo

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, so lembrando que fiz desktop first, logo mais vou transformar ele em mobile 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.

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.

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

desgnerresponsivo

bom dia =3

como que trabalho com designer responsido porque veja bem eu uso o media queries certo e meu layout tera que se adaptar a diversos aparelhos como tablets iphne smartphines notebook tvs porem eu encontrei um problema no tablet em modo paisagem ele tem um px de 1024x768 s w no notebook seria 1024 x 600 eu uso o media queries para o tablet correto uso o max-width so lembrando que fiz desktop firts logo mais vou transformar ele e mobile so que nao to conseguindo diferenciar de um para o outo os dois etem o width 1024 a tela fica certa mais como o height e diferente ai da problema na altura e nao to conseguindo arrumar isso sou novato na area segue um exemplo do modelo que eu fiz para versao 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%;
    }

}

so as medias iniciais basicas basicas que eu pretendo usar sao

1280x1024 1024x768 768x1024 480x320 1680x1050 1024x600

entao e tem mais umk problema eu tbm fiz uma media querie para essa primeira resolucao 1280x1024 assim que eu fiz as minhas outras duas medias queries pararam de funcionar que foram a de 1024x768 e 768x1024 se puderem me ajudar eu agradeceria sou novato na area de designer responsivo