最小/最大宽度/高度，具有多个值 [英] min/max width/height with multiple values

问题描述

我要限制<div>的宽度不超过50%，和不超过200px.

I want limit the width of an <div> no more than 50%, and no more than 200px.

这意味着，当50%小于200px时，其行为应与max-width: 50%相同，否则其行为将变为max-width: 200px.

Which means, when 50% is less than 200px, it should have the same behavior as max-width: 50%, otherwise its behavior becomes max-width: 200px.

如何用CSS定义它?
(没有 min函数，尚不支持 ^{请参阅下面的版本} )

How can I define this with CSS?
(without min function, which have not been supported yet ^{See edition below})

<div class="some_element">Text here</div>
<style>
.some_element {
    background: red;
    float: left;
    width: auto;
    max-width: 200px;
    max-width: 50%; /* this will override previous one, but i want both of them work */
}
</style>

---

在2020年进行编辑(最小，最大，钳位功能)

CSS 分钟/

---

Edit in 2020 (min, max, clamp functions)

CSS min / max / clamp functions had got some supports in 2019 / 2020. You can have a look at it while be careful of compatibility.

推荐答案

您可以将所需规则指定为:页面宽度小于或等于400px时，最大宽度为50％；页面宽度大于或等于200px时，为200px等于400px.这听起来很像媒体查询！我先处理较小的屏幕宽度，然后覆盖较大的宽度，这就是CSS:

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;
  }
}

如果愿意，可以交换50%和200px，也可以将min-width更改为max-width.

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

这篇关于最小/最大宽度/高度，具有多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！