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

50 votes357 views4 answers
Css reset code
CSS
1 vote407 views1 answer
Bootstrap col no gaps
CSS Bootstrap
72 votes349 views6 answers
Flexbox css
CSS
0 vote347 views1 answer
Trim background image css
CSS
0 vote335 views1 answer
Smooth button effect css
CSS
2 votes476 views4 answers
Laravel htaccess
CSS
0 vote380 views1 answer
Textauswahl deaktivieren
CSS
16 votes360 views4 answers
Change background CSS
CSS
0 vote367 views2 answers
Webpack animate.css
CSS
0 vote430 views1 answer
Background image for div in grid system bootstrap
CSS Bootstrap