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
.
media queries
para o max-width você pode utilizar para o max-height