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 vote373 views1 answer
Css padding top screen height
CSS
0 vote343 views1 answer
Css if screen size less than
CSS
0 vote345 views1 answer
This syntax requires an imported helper but module 'tslib' cannot be found.
CSS
1 vote364 views1 answer
Css width fit to content
CSS
7 votes379 views3 answers
Bootstrap remove outline
CSS
0 vote341 views1 answer
Css grid auto row
CSS
96 votes372 views2 answers
How to position in css
CSS
0 vote337 views5 answers
Style
CSS
0 vote335 views1 answer
Enlarge ionicons css
CSS
3 votes337 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS