teffcode/css-quiz-min-function.md

## css-quiz-min-function.md

      
    Raw
  

              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