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