css-quiz-min-function.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

What would be the width for the peach element considering the following code (HTML and CSS) and a Viewport width of 900px: A, B or C?

Click here to see the correct answer and explanation 👀

Correct Answer

Explanation

C

The browser has to choose the smallest of the values (50%, 500px). Choosing that depends on the viewport width. If 50% computes to a value more than 500px, then it will be ignored and 500px will be used instead. Otherwise, if the 50% computes to a value less than 500px, then the 50% will be used as a value for the width. Can you guess the viewport width that will make that happen? (The 50% of X = 500px). The viewport width is 1000px.

Explicación basada en 👉🏼 min(), max(), and clamp() CSS Functions

Code:

HTML:

<div class="🍑"></div>

CSS:

.🍑 {
  background: PeachPuff;
  height: 100px;
  width: min(50%, 500px);
}

CodePen

Spanish version 🚀

¿Cuál sería el width para el elemento peach teniendo en cuenta el siguiente código (HTML y CSS) y un Viewport width de 900px: A, B o C?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta

Explicación

C

min() hace que el navegador tenga que elegir el valor más pequeño dentro de esta función (ya sea 50% o 500px). Elegir esto depende del ancho del Viewport. Entonces, lo que el navegador hace es el siguiente cálculo: 50% de 900px = 450px, y se pregunta: Cuál es el valor más pequeño, 450px o 500px ? Y de ahí, escoge el valor más pequeño (como te mencioné al principio) y lo pone en el width del elemento 🍑

Explicación basada en 👉🏼 min(), max(), and clamp() CSS Functions

Código completo:

HTML:

<div class="🍑"></div>

CSS:

.🍑 {
  background: PeachPuff;
  height: 100px;
  width: min(50%, 500px);
}

CodePen

La respuesta es la C