Instagram | Twitter | LinkedIn
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);
}
¿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);
}
La respuesta es la C