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 vote135 views1 answer
Animated progress bar css
CSS
23 votes142 views4 answers
Gradient border css
CSS
2 votes143 views1 answer
Bootstrap 5 auto darkmode 5
CSS
0 vote149 views1 answer
Css absolute from center and not corner
CSS
0 vote133 views1 answer
Css change scroll anchor point under navbar
CSS
164 votes173 views6 answers
Css bold
CSS
0 vote129 views1 answer
How to add images on images css
CSS
0 vote141 views1 answer
Transparent circle in a div
CSS
0 vote132 views1 answer
What is integrity cdn
CSS
0 vote134 views1 answer
Float: down css
CSS