将最大宽度设置为最小值的90％和300px

Question

是否可以使用纯CSS将元素的最大宽度设置为最小90％或300px？

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

Answer 1

您可以将width设置为90%，将max-width设置为300px。在这种情况下，如果300px为90% > 300px，如果90%为90% < 300px（考虑到您的元素是块元素，其宽度应为100%默认情况下）

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

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

Answer 2

我相信实现这一目标的唯一方法是：

@media (max-width: 300px) and (max-width: 90%) {
    .stuff {width: 300px}
}

因此，您将无法使用媒体查询。