CSS中如何获取两个不同单位宽度值中的较小值？

• CSS width 属性不支持多值逗号分隔的写法，你目前写的width: 90%, 500px;属于无效语法，浏览器会直接跳过这条规则，元素宽度会回退到默认值。

方案1：组合 width 和 max-width（全浏览器兼容） #

这是兼容性最好的写法，所有新旧浏览器都支持：

element {
  width: 90%;
  max-width: 500px;
}

逻辑完全匹配你的要求：元素默认占窗口宽度的90%，最大不会超过500px，自动取两个值中的较小值生效。

方案2：使用CSS min()函数（现代浏览器写法） #

如果不需要兼容IE等老旧浏览器，可以用更直观的min()比较函数，直接返回多个值中的最小值：

element {
  width: min(90%, 500px);
}

内容的提问来源于stack exchange，提问作者wutadam