css - 将最大宽度设置为 90% 和 300px 中的最小值

Question

有没有办法使用纯 CSS 将元素的最大宽度设置为最小值 90% 或 300px？

P.S. 目前，它是使用媒体查询和有关文档布局的先验信息完成的，但我正在寻找更简洁的解决方案。

Answer 1

您可以设置 width成为90%和 max-width成为300px .在这种情况下，它将是 300px如果90% > 300px和 90%如果90% < 300px (考虑到您的元素是 block 元素，其宽度默认应为 100%)

.box {
  width:90%;
  max-width:300px;
  height:50px;
  background:red;
}

<div class="box"></div>