Responsive Images (CSS)

Section 6, Lecture 63.

    Resumo/Informações
    • Adicionar media queries que possuem como alvo resoluções, e com isso podemos alterar alguns elementos do site baseado na resolução, dpi, etc.
    • Sintaxe:
      @media (min-resolution: 192dpi) and (min-width: 37.5em),
      (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
      (min-width: 125em) {
      //125em = 2000/16 = 125. 16 por ser o default.
        background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.8),
        rgba($color-primary-dark, 0.8)),
        url('../img/hero.jpg'); }
    • A vírgula separa as condições de aplicação das propriedades abaixo.
    • 37.5em = 600px.
    • 192dpi is the Apple retina screen, usually used as reference.
    • Adicionado and min-width 600px para não puxar a imagem HD de 2000px para um celular, e sim a menor, visto ser uma tela pequena ela fica em HD anyways.
    • -webkit-min-device-pixel-ratio utilizado para essa propriedade funcionar no safari, 2 significa @2x.