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 vote280 views1 answer
Get ssl certificate command line
CSS
1 vote283 views1 answer
Bootstrap col no gaps
CSS
2 votes287 views1 answer
Width 100% with padding
CSS
16 votes300 views2 answers
Css hiddden
CSS
0 vote255 views1 answer
Different :after and ::after
CSS
0 vote292 views1 answer
Apply image as full screen responsive background
CSS
0 vote308 views1 answer
Custom hr in css
CSS
22 votes287 views5 answers
Css center grid
CSS
4 votes302 views2 answers
Change bot page background top.gg
CSS
0 vote315 views1 answer
Subtracting css
CSS