Beto Muniz
  • Share

Dica CSS min(), max() e clamp()

tech

🗣 A função CSS min() retorna o MENOR valor declarado.

📱 Numa viewport 768px de largura:

min(10vw, 100px) retorna 10vw.

🖥 Numa viewport 1024px de largura:

min(10vw, 100px) retorna 100px.

🗣 Estranhamente, min() é bem útil pra controlar o valor MÁXIMO desejado.

🗣 A função CSS max() retorna o MAIOR valor declarado.

📱 Numa viewport 768px de largura:

max(10vw, 100px) retorna 100px.

🖥 Numa viewport 1024px de largura:

max(10vw, 100px) retorna 10vw.

🗣 max() é muito útil pra controlar o valor MÍNIMO desejado.

🗣 A função CSS clamp() retorna o valor DENTRO DE UM LIMITE mínimo e máximo.

🖼 A declaração abaixo numa imagem:

width: clamp(50px, 100%, 500px)

Retorna 100% da largura do container até atingir 50px ou 500px

🗣 clamp() é bem útil na criação de interfaces responsivas.

  • Share It!
Copyright Beto Muniz © 2010-2020. All rights reserved.