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 vote137 views1 answer
Remove a styles css class with javafx
CSS
0 vote124 views1 answer
ERROR in multi ./node_modules/ngx-toastr/toastr.css ./src/styles.scss
CSS
1 vote126 views1 answer
H2 custom font family html css
CSS
1 vote165 views1 answer
How to make slideshow not go over navigation bar
CSS
1 vote124 views1 answer
Move element to the left css
CSS
9 votes142 views1 answer
Css border top
CSS
1 vote154 views1 answer
Scroll background still
CSS
0 vote165 views1 answer
Using tinymce with tailwind css
CSS
19 votes150 views4 answers
Scss react
CSS
0 vote152 views1 answer
Rendre une div scrollable
CSS