Media Queries para dispositivos mobile de alta resolução

[Vitor Luis_78306 0]

Olá pessoal, tudo bem?

Estou desenvolvendo um website responsivo, porém estou com alguns problemas ao tentar encontrar um denominador comum para que o layout funcione bem tanto para desktop, quanto para dispositivos mobile.

 

Meu problema, tem sido com os dispositivos de alta resolução, que chegam a funcionar com resoluções superiores a 1200px.

Sendo assim, quando declaro um media query com max-width de 960px por exemplo, que é um tamanho legal para notebooks, acaba atingindo também os celulares, o que implica em menus ruins e etc.

 

Usar o max-device-width acaba impedindo que o layout se adapte de acordo com o resize do browser, além de alguns probleminhas que estou tendo para verificar o real tamanho de meu celular.

 

Como vocês tem trabalhado com isso?

 

 

[guilomaker 31]

eu faço assim! vou nesse site

 

http://quirktools.com/screenfly/

 

e vou começo olhando as principais resoluções de desktop já com o site fluído, ai começo da menor e vou só modificando o container pra cada resolução! exemplo:

 

1024x600

 

como e uma tela pequena o conteudo usa toda resolução, então eu deixo um container de 98 ou 100% de 1024

 

@media screen and (max-width:1024px){

 

.container{

width:98%;

}

}

 

1920x1080

 

aqui como e maior que meu container que e 1200 então ele se adapta sozinho

 

resumindo! re meu layout quebrar menu ou outra coisa em alguma dessas resoluções que estão no site, eu só adiciono a resolução no media e determino o tamanho do meu container, só isso.

 

já pra mobile e igual eu uso as resoluções desse site, e vou adaptando o conteúdo conforme a resolução.

 

eu faço assim no meu pra desktop, você pode ver que quanto maior a resolução, menor e o container.

@media screen and (max-width: 1920px) {
	.container{
		width: 51.04166666666667%;
	} 
}
@media screen and (max-width: 1680px) {
	.container{
		width: 58.33333333333333%;
	} 
}
@media screen and (max-width: 1600px) {
	.container{
		width: 61.25%;
	} 
}
@media screen and (max-width: 1440px) {
	.container{
		width: 68.05555555555556%;
	} 
}
@media screen and (max-width: 1366px) {
	.container{
		width: 71.74231332357247%;
	} 
}
@media screen and (max-width: 1280px) {
	.container{
		width: 76.5625%;
	} 
}
@media screen and (max-width: 1024px) {
	.container{
		width: 95.703125%;
	} 
}

e pra mobile sigo o mesmo padrão, só que ai modifico o menu textos e outras coisas alem do container.

 

pra verificar a resolução do seu celular e só procurar no google.

tem uma extensão pro chrome que chama Responsive Inspector que ajuda a trabalhar com @media, e tem outras também, da uma procurada la nas extensões para desenvolvedores.