css clamp vs media queries

1<article>
2  Lorem ipsum ...
3</article>
4
5/* Using clamp -------------------------- */
6article {
7  width: clamp(200px, 50%, 800px);
8}
9
10
11/* Using media queries ------------------ */
12/* Default */
13article {
14  width: 50%;
15}
16
17/* Small screens */
18@media only screen and (max-width: 600px) {
19  article {
20    width: 200px;
21  }
22}
23
24/* Large screens */
25@media only screen and (min-width: 1200px) {
26  article {
27    width: 800px;
28  }
29}