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

17 votes180 views1 answer
Variables scss en calc()
CSS
18 votes215 views6 answers
Css box sizing
CSS
29 votes181 views6 answers
Background size in css
CSS
0 vote203 views1 answer
Cd program files x86
CSS
0 vote226 views3 answers
Hyper text programming language
CSS
0 vote185 views1 answer
Transition all ease 0.3s
CSS
6 votes200 views6 answers
Break word css
CSS
1 vote172 views1 answer
Highlight table row on hover
CSS
44 votes368 views5 answers
Breakpoint bootstrap
CSS Bootstrap
29 votes225 views4 answers
How to remove underline of link in css
CSS