5

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.

5
  • User, sua pergunta foi um pouco confusa mas tentei melhorar ela (não negativei), você poderia colocar o css usado para as outras resoluções? Ou já pensou em utilizar bootrstrap? Facilitaria bastante o seu trabalho... Commented 15/04/2015 às 12:41
  • Eu não votei negativo na sua questão, mas originalmente o português dela estava muito ruim, e acho que foi por isso que ela recebeu dois votos contra. Então para a próxima vez, fica a dica de dar uma revisada no português antes de postar. Commented 15/04/2015 às 12:42
  • da mesma forma que você usa media queries para o max-width você pode utilizar para o max-height Commented 15/04/2015 às 12:43
  • Não vi a forma que a pergunta havia sido publicada originalmente, mas da forma que está agora, na minha opinião, é uma pergunta válida e não merece ser negativada Commented 15/04/2015 às 12:48
  • obrigado pela dica irei revisar sim é como falam a pressa e inimiga da perfeição =3 Commented 15/04/2015 às 12:57

3 Respostas 3

6

Você pode especificar e aplicar conforme a combinação de altura e largura desejado. Exemplo:

@media (min-width: 768px) and (max-width: 979px)

Sinceramente, não é mais fácil utilizar algum framework como o bootstrap ?

1
  • olá amigo tudo bem, então não quis usar um framework porque eu já havia feito tudo na mão e o layout responsivo também por isso não usei e meu maior problema mesmo e saber diferenciar por exemplo uma resolução de 1024x768 de uma 1024x600 quando eu uso um media querie para 1024 funciona os dois "numa boa" só que como diferencio o 768 dos 600 essa e a minha dificuldade a largura fica correta porem a altura não sai as minhas imagem por exemplo e meus posicionamentos ficam ruins na tela Commented 15/04/2015 às 12:52
5

Um conselho, use o Twitter Bootstrap, se você não deseja utilizar todos os componentes dele, você pode customiza-lo e baixar apenas a parte responsiva.

Porém caso você seja um programador Hardcore, pode fazer isso usando algumas propriedades bastante peculiares das media queries.

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

Atenção, com o (min|max)-device-(width|height) você está pegando a resolução do dispositivo, e muitos dispositivos tem resolução e densidade de pixeis diferente. Aconselho que estudo as resoluções e densidades dos dispositivos que deseja trabalhar.

2
  • Olá amigo obrigado pelo conselho eu sou um programador hardcore "rsrsrs" estou fazendo tudo na raça mesmo inclusive as media queries mais ai e que ta o problema eu não estou conseguindo trabalhar com as medidas porque eu arrumei a tela aqui no meu computador mais quando eu coloco no meu notebook um exemplo a tela ainda sim bagunça e a minha maior dificuldade e também saber por exemplo se fiz uma media queries para 1280 e outra para 1024 e o restante em pixels entre elas como que vai ficar e não estou conseguindo mexer na altura porque 1024x768 e diferente de 1024x600 um exemplo Commented 15/04/2015 às 13:02
  • Olá @user23633, se você quer trabalhar com altura, você tem que pegar a altura do dispositivo max-device-height | min-device-height, assim como citei ali no exemplo. Quando você utiliza por exemplo max-width: 1024px, quer dizer que TODOS os dispositivos que tenham uma largura menor do que 1024 usarão aquela regra, a não ser que tenha outra regra na sequência, como max-width: 768px, que ai a regra anterior pegará de 769px até 1024px...
    – KaduAmaral
    Commented 15/04/2015 às 14:55
4

Para diferenciar uma resolução 1024x600 de uma 1024x768 você pode utilizar uma combinação de Media Queries como o exemplo a seguir:

@media (max-width: 1024px) and (max-height: 768px)
{
    //
}
@media (max-width: 1024px) and (max-height: 600px)
{
    //
}

e de outra forma:

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

@media screen and (max-width: 1024px) , screen and (max-height: 768px) {
  ...
}
4
  • ola amigo =3 "hmmm" irei testar isso agora mesmo... pois tentei algo parecido porem não vai s uma pergunta eu vou ultilizar um arquivo CSS separa-lo e irei linkalo no meu html quando chamar a minha tag link eu devo colocar algo como este exemplo: <link rel="stylesheet" href="css/responsivo/tablet.css" media="screen"/> Commented 15/04/2015 às 13:05
  • @user23633 isso seria outra dúvida? pode procurar se essa dúvida não foi respondida antes aqui no site, caso não tenha sido aconselho você a criar uma nova pergunta solicitando isso, ai tu vai estar utilizando o StackOverflow corretamente :P Commented 15/04/2015 às 13:09
  • 1
    OK obrigado errando é que se aprende =p Commented 15/04/2015 às 13:11
  • 1
    Amigo deu certo muitoooooo obrigadoooooo Commented 15/04/2015 às 13:21

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 .