@media queries

[deppbrazil]

Bom dia galera, se tratando de desenvolvimento WebResponsivo, como vcs trabalham a utilização dos media queries ?

Problema 1

Uma coisa que sempre nos assombrou aqui na empresa foi Resolução de tela x Tamanho de tela, um exemplo disso o iPhone7 por exemplo que tem um tamanho físico acho que de 480px de largura em orientação portrait, mas ele tem uma resolução de tela 1334 x 750px e nas versões plus 1920 x 1080px, então tenho alguns medias queries pré-prontos que já deixei salvo em um .css em meu SublimeText que está dispnível neste repo.

Pois bem, teoricamente acredito que esses 2 media queries abaixo seriam para versões mobile

@media screen and (min-width:320px) { }
@media screen and (min-width:480px) { }

Porém o que acontece muitas vezes é vc confirgurar esses 2 media queries pensando nos smartphones e na hora de testar notar alguns dispositivos pega outra configuração =(

Isso mata muito o projeto... pois dai vc conserta em 1 e danifica em 3 =s rsrs

Não sei se já aconteceu esse tipo de situação com vcs, as vezes posso não estar usando os medias queries da forma mais adequada, pois vejo que ele tem mtas formas diferentes de utilização

Esse artigo do DevMedia me ajudou bastante, mas mesmo assim temos uma gama de opções relacionada a utilização de media queries

Então qual seria a forma que vcs mais usam no momento ??

---

Problema 2

Outro ponto principal são os testes de layout, usamos alguns plugins no Chrome como WindowResizer e o Emmet Re:view para otimizar tempo de toda vez ter que ficar subindo em um servidor de teste e abrir no proprio dispositivo.

Os plugins ajudam bastante, mas não são 100%, vejo que o melhor teste ainda é o no proprio dispositivo, mas como hj tb temos uma variedade enorme de telas e resoluções fica inviável testar em tudo...

Como vcs otimizam os testes e entregam para um maior numero de usuarios e dispositivos suas aplicações ??

=)

[lucianobarauna]

Rapaz vamos lá

• Problema 1
  Acredito que tenha essa diferença por conta de você não está deixando o zoom em 1 e pegando o tamanho de tela do aparelho para servir como referência para a mediaqueries e não o tamanho da resolução
  Para essa solução creio eu que seria colocar no head essa tag:
  <meta name="viewport" content="width=device-width, initial-scale=1">
  Aqui a tag faz exatamente isso que comentei.

• Problema 2
  Eu nunca usei esses caras rs sempre fui pela ferramenta de desenvolvimento do chrome apertando f12 no windows e clicando nesse carinha que está em círculo na imagem
  

Ao clicar nele o chrome habilita o modo responsivo e você consegue visualizar as mediaqueries e navegar entre elas. Caso você tenha habilitado pela primeira vez creio que o chrome não vá mostrar as mediaqueries, sendo assim vc precisa habilitar elas para isso basta procurar esse botão no canto superior direito

Era essa sua dúvida ?

[dtfialho]

@diogomoretti só para complementar as soluções que o @lucianobarauna deu, que são boas, dá uma olhadinha nesse artigo https://www.todoespacoonline.com/w/2014/05/especificidade-css-2/ que as vezes uma regra que você escreve em uma das queries, dependendo de como você tiver feito pode acabar sobrescrevendo a outra.

[deppbrazil]

@lucianobarauna Legal a questão do

<meta name="viewport" content="width=device-width, initial-scale=1">

Usava o initial-scale=1 em alguns projetos, e o initial-scale=1.0 que deve significar o mesmo, tem tb o maximum-scale=1.0, e isso as vezes acaba confundindo um pouco...

Encontrei tb esses 3 caras, mas não sei da importancia para usar juntos com os parâmetro acima

user-scalable=false
user-scalable=no
user-scalable=0

Quanto a utilização da ferramenta de Dev do Chrome uso ela tb as vezes, e notei agora que atualizaram bastante a interface, antigamente não tinha essa precisão, boa dica vou usa-la mais... =)

@dtfialho ótimo artigo Vlw... =)

[AmandaFonseca]

Eu gosto de usar a medida EM na media query porque Em é relativo ao font-size. Então uma vez que você altere este valor dentro de um article, por exemplo, todos os elementos filhos também serão alterados.

Esse artigo é excelente e fala sobre o tema.

Tbm uso a ferramenta de Dev do Chrome mas uso ela no final da página porque na lateral pode dar a impressão de que sua mediaquery está correta quando não está:

[weltonsanches]

Acho que este artigo do @sergiolopes pode ser bem interessante neste caso.

[kvnol]

A melhor forma, na minha humilde opinião, para se trabalhar com as media queries são por breakpoints.

Você tem seu layout padrão para desktop/mobile (independente por onde você começará) e vai adaptando nas quebras, ao invés de definir milhares de resoluções de telas que as fabricantes de celulares fazem.

E, citando o artigo do @sergiolopes, que o @weltonsanches postou aqui:

Quando achar um ponto em que o design quebra, copie o tamanho da janela e crie uma media query com esse valor lá no seu CSS;

Espero ter ajudado.

[mateusmiguel]

@weltonsanches @kvnol Também lembrei de primeira no artigo do @sergiolopes! Leituras que valem pra vida rs