Media Queries - Consulta de Medias


    Tipos de mídias:
      all – todos os dispositivos
      aural – sintetizadores de voz
      braille – leitores de Braille
      embossed – impressoras de Braille
      handheld – dispositivos de mão. Por exemplo: celulares com telas pequenas.
      print – impressoras convencionais
      projection – apresentações de slides
      screen – monitores coloridas
      tty – teleimpressores e terminais
      tv – televisores
      Exemplo de utilização:

    Exemplos de resoluções de telas:
      320 pixels – Smartphones no modo retrato.
      480 pixels – Smartphones no modo paisagem.
      600 pixels – Tablets pequenos. Ex: Amazon Kindle (600×800)
      768 pixels – Tablets maiores em modo retrato. Ex: iPad (768×1024)
      1024 pixels – Tablets maiores em modo paisagem, monitores antigos.
      1200 pixels – Monitores wide.

      Grid System Link: getbootstrap.com/css/#grid

    Exemplos de utilização media queries:
      @media screen and (max-width: 767px) {

      } Link do recurso respond.js:

      Respond.js é incluso no código para que o mediaqueries funcione em versões antigas do brownser. https://cdnjs.com/libraries/respond.js/

    Desktop-first and Mobile-first





    Selecting Breakpoints - The options
    • Bad - Mais utilizado, mas não recomendado
      Defines the breaking points using the width of popular products, like Apple products.
      a) Isso é complicado porque a maior parte dos aparelhos podem não ser Apple products.
      b) Pode ser que a Apple lance um novo aparelho, com dimensões diferentes de tela e seu design não mais funcione para aquele aparelho.
    • Good - Muito utilizado, mais interessante visto não ser tão complicado como o perfect
      a) We look at all the most-used like device width on the entire internet, try to group them together in a logical way and then pick our breakpoints from that.
      b) This is good because we are not setting breakpoints at one specific point, but between similar device width.
    • Perfect - O mais recomendado, porém leva muito tempo, pouco utilizado.
      a) Ignore devices and only look at the content of your design.
      b) Você começa em um tamanho de tela, se o design ter sido feito em desktop-first, começa com a tela grande.
      c) Com isso, você vai diminuindo o width da página até chegar em um ponto que o design é quebrado, onde o design não mais está bom.
      d) Nesse ponto, você insere um breakpoint e define um novo design para quando chegar nesse width.
      Ou seja, você simplesmente coloca os breakpoints onde o seu design começa a parecer fora do lugar.


      • Exemplos de breakpoints para os widths mais presentes em aparelhos: