Skip to main content

Units | CSS

  • Units | CSS

🧩 Unidades baseadas em fonte (Font-based)​

  • em – Relativo ao tamanho da fonte do elemento pai.

  • rem – Relativo ao tamanho da fonte do elemento raiz (<html>).

  • ex – Representa a altura-x da fonte atual (aproximadamente a altura da letra minúscula “x”).

    Essa unidade existe desde o CSS1, mas muita gente só descobriu recentemente.

  • ch – Largura do caractere “0” (zero) na fonte atual.

    Disponível desde o CSS3, mas frequentemente esquecida.

  • lh – Igual à altura da linha (line-height) do elemento.

🌐 Unidades baseadas na viewport (Viewport-based)​

  • vh – 1% da altura da viewport (área visível da tela).

  • vw – 1% da largura da viewport.

  • vmin – 1% da menor dimensão da viewport (altura ou largura).

    Introduzida no CSS3, mas pouco usada.

  • vmax – 1% da maior dimensão da viewport (altura ou largura).

    Também do CSS3, mas raramente utilizada.

📱 Unidades modernas de viewport (Modern viewport units)​

Essas novas unidades foram criadas para lidar melhor com navegadores móveis, que têm barras de navegação dinâmicas (chrome/UI que aparecem e somem).

  • dvh – Altura dinâmica da viewport, ajusta automaticamente conforme a interface do navegador móvel aparece ou desaparece.
  • dvw – Largura dinâmica da viewport.
  • svh – “Small viewport height”: a menor altura possível considerando os elementos dinâmicos da UI.
  • svw – “Small viewport width”: a menor largura possível considerando os elementos dinâmicos da UI.
  • lvh – “Large viewport height”: a maior altura possível considerando os elementos dinâmicos da UI.
  • lvw – “Large viewport width”: a maior largura possível considerando os elementos dinâmicos da UI.