Campo de busca

Categoria Front-End

CSS
Breakpoints e Lógica em Media Queries

Breakpoints e Lógica em Media Queries

Por | 04 de junho, 2013 | 2 comentários

Breakpoints

Apesar de existir mais de uma dezena de parâmetros para Media Queries, a verdade é que somente alguns poucos são usados. Isso ocorre não pela falta de cuidado ou competência no desenvolvimento, mas principalmente devido ao fato de que as necessidades atuais da maioria dos sites não requerem o uso de muitos dos parâmetros.

E, como foi visto anteriormente, no post da Eliane, O que é Design Responsivo? é possível declarar regras CSS específicas conforme o tamanho do dispositivo ou browser, através dos parâmetros device-width e width(e seus prefixos). Essa abordagem, gera a maior discussão do desenvolvimento responsivo: Quais os Breakpoints mais eficientes??

No inicio dos estudos do Webdesign Responsivo, os desenvolvedores propuseram cada breakpoint, com os dispositivos que possuíam na época, por exemplo: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) para smartphones, @media only screen and (min-width : 1224px) para notebooks e desktops e assim por diante. Com o tempo esses “medidas” não funcionavam mais, pois é impossível determinar o breakpoint correto para cada dispositivo, pois nos dias de hoje existem milhares de dispositivos com telas, ddp (densidade de pixels) variadas, com essa grande variedade de devices, como se adequar a todos?

Como não existe um “padrão” para seguir, vamos ver os mais conhecidos:

320 and Up

  @media print {
}
  @media only screen and (min-width: 480px) {
}
  @media only screen and (min-width: 600px) {
}
  @media only screen and (min-width: 768px) {
}
  @media only screen and (min-width: 992px) {
}
  @media only screen and (min-width: 1382px) {
}
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5)
  {
}

Perceba que o uso de Media Queries se dá de forma “crescente”, ou seja, primeiro aplicando estilos para dispositivos com resoluções menores.

Less Framework

  /* Tablet Layout */
  @media only screen and (min-width: 768px) and (max-width: 991px) { ... }
  /* Mobile Layout */
  @media only screen and (max-width: 767px) { ... }
  /* Layout largo de mobile */
  @media only screen and (min-width: 480px) and (max-width: 767px) { ... }
  /* Retina display */
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ... }

Os próprios comentários do Less Framework já ajudam bastante a identificar para quais tipos de navegação as folhas de estilo foram projetadas. Os desenvolvedores determinaram os Breakpoints no que chamaram de “Tablet Layout”, “Mobile Layout”, “Layout largo de mobile” e “Retina display” (regras estas, obviamente, somente para os poucos dispositivos que temos hoje que possuem esta característica).

Skeleton

 
  /* Menor que 960 */
  @media only screen and (max-width: 959px) { ... }
  /* Tablet Portrait ao padrão 960 */
  @media only screen and (min-width: 768px) and (max-width: 959px) { ... }
  /* Todos tamanhos de mobile */
  @media only screen and (max-width: 767px) { ... }
  /* Mobile em landscape a tablet Portrait */
  @media only screen and (min-width: 480px) and (max-width: 767px) { ... }
  /* Mobile em portrait a mobile em landscape */
  @media only screen and (max-width: 479px) { ... }

O Skeleton é bem específico ao propor Breakpoints para dispositivos levando em consideração, inclusive, a orientação landscape ou portrait (paisagem ou retrato). Quer dizer, um planejamento da experiência do usuário mais detalhado e bem feito que, se bem usado, tem maiores chances de promover uma boa experiência aos visitantes e garantir uma boa dose de “agradabilidade”.

Twitter Bootstrap

  /* Telefones em landscape e abaixo */
  @media (max-width: 480px) { ... }
  /* Telefone em landscape a tablet em portrait */
  @media (max-width: 767px) { ... }
  /* tablet em portrait a landscape e desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }
  /* Desktop grande */
  @media (min-width: 1200px) { ... }

O Twitter Bootstrap também teve o cuidado de projetar para vários dispositivos usando as variações de orientação. Apesar de conter menos Breakpoints que o Skeleton, dá conta do recado tranquilamente.

Lembrando que isso é o que vem por “default” e, seja lá em qual destes exemplos você esteja se inspirando, pode acrescentar ou retirar quantos Breakpoints forem necessários.

Lógica em Media Queries

Para aplicar o Breakpoints com mais qualidade, é possível combinar medidas para que o usuário tenha a melhor experiência possível de um dispositivo móvel ou um desktop. Essa técnica só é possível graças ao Operadores Lógicos.

AND
Essa media querie só será aplicada, caso os dois valores forem validos, caso contrario é ignorada.

@media (min-width: 600px) and (max-width: 800px) {
      html {background: red; }
}

OR
Essa media querie só será aplicada, caso algum Breakpoints listado seja verdadeiro.

@media (max-width: 600px), (min-width: 800px) {
      html {background: red; }
}

NOT
Lógica reversa, ou seja só aplicara caso seja falsa.

@media not all and (max-width: 600px) {
      html {background: red; }
}

Exclusiva
Essa lógica é utilizada para dispositivos que não se encaixam no “padrão” de Breakpoints, e consequentemente vão precisar de algum tamanho especifico para que fique no formato correto

@media (max-width: 400px)
      html {background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
      html {background: green; }
}
@media (min-width: 801px) {
      html {background:blue; }
}

Existem 2 conceitos de para a implementação de WebSites responsivos, uma seria pelo “Mobile First”, que consiste em iniciar o projeto por sua menor medida e ir adaptando a cada device com resolução maior, a outra opção é “Desktop First” exatamente ao contrario iniciar a implementação pelo seu maior device, ou seja iniciar pelo Desktop e ir adaptando o que for necessário.

Mobile First
É iniciado pela proopriedade min-width.

html {background: red; }
@media (min-width: 600px) {
      html {background: green; }
}

Desktop First
É representado pela propriedade max-width:

html {background: red; }
@media (max-width: 600px) {
      html {background: green; }
}

Como nem tudo é fácil na vida, essas técnicas de Media Queries, não funciona em navegadores antigos(IE8, IE7), como no Brasil ainda temos uma grande porção de usuários que utilizam navegadores antigos, existem muitas soluções em Javascript, entre elas a mais famosas são:

Respond. Suporte somente os parâmetros min-width and max-width, mas é bastante eficiente no que se propõe.

cssì-mediaqueries.js. É mais pesado e mais lento que o Respond, mas suporta mais parâmetros de Media Queries.

 

 

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[2] Comentários  

Junior Paz

No Bootstrap, parece existe um "limbo" de 979px à 1200px. Como resolveria?

25-03-2014 às 09:37 Responder

Augusto César

Olá amigo, ótimo artigo. Creio que tenha se enganado no mobile-first e desktop first. O mobile-first utiliza o max-width, para se adaptar a tudo o que é menor que o max-width e o desktop-first utiliza o min-width.

07-04-2015 às 20:43 Responder