Css clamp vs media queries

<article>
  Lorem ipsum ...
</article>

/* Using clamp -------------------------- */
article {
  width: clamp(200px, 50%, 800px);
}


/* Using media queries ------------------ */
/* Default */
article {
  width: 50%;
}

/* Small screens */
@media only screen and (max-width: 600px) {
  article {
    width: 200px;
  }
}

/* Large screens */
@media only screen and (min-width: 1200px) {
  article {
    width: 800px;
  }
}

Similar codes

0 vote312 views1 answer
Taille texte css
CSS
4 votes267 views2 answers
Gap between two flex items
CSS
0 vote284 views1 answer
How to center an overlay button using css transform and translate
CSS
-1 vote285 views1 answer
883 usd to nis
CSS
0 vote257 views1 answer
Css content from data attribute
CSS
0 vote374 views1 answer
Bootstrap progress bar animation not working
CSS Bootstrap
2 votes315 views2 answers
Image rendering values css
CSS
1 vote271 views1 answer
Second scrollbar appears
CSS
0 vote284 views1 answer
Corsair css
CSS
0 vote279 views1 answer
Relier css html
CSS