min/max width/height with multiple values

Question

Edit in 2020 (min, max, clamp functions)

To anyone who get here by search engines:

CSS min / max / clamp functions had got some supports in recent (2020) bro

Answer 1

You can state this desired rule as 50% max width when the page width is less than or equal to 400px, and 200px when the page width is greater than or equal to 400px. That sounds a lot like a media query! I handle smaller screen widths first and then override for larger widths, which is this CSS:

.some_element {
  background: red;
  float: left;
  width: auto;
  max-width: 50%;
}
@media (min-width: 400px) {
  .some_element {
    max-width: 200px;
  }
}

If you prefer, you can swap the 50% and the 200px and also change the min-width to max-width.