如何实现带max-width的响应式卡片？无需媒体查询

需要实现带有max-width的响应式卡片，要求：

• 大屏设备上，卡片占满全部可用宽度；
• 小屏设备上，卡片按比例适配屏幕尺寸；

尝试了以下代码但未实现需求，询问无需media queries的解决方法：

.card {
  max-width: 300px;
  width: 100%;
  background: pink;
}

<div class="card">
  ...
</div>

试试用CSS的clamp()或min()函数，不用媒体查询就能实现需求，根据你的实际情况选：

情况1：小屏全屏适配，大屏限宽 #

要是你需要小屏时卡片占满屏幕，大屏时卡片宽度不超过某个最大值，直接用min()函数就行，写法比你原来的更简洁：

.card {
  width: min(100%, 600px); /* 卡片宽度取100%和600px里的小值 */
  background: pink;
  /* 大屏时想让卡片居中的话加这个 */
  margin: 0 auto;
}

屏幕宽度小于600px时，卡片占满屏幕；屏幕超600px时，卡片固定600px宽。

情况2：小屏按比例适配，大屏占满且限宽 #

要是你要小屏时卡片按比例（比如屏幕的90%）显示，中屏占满可用空间，大屏时不超过最大值，就用clamp()函数：

.card {
  width: clamp(90vw, 100%, 800px);
  background: pink;
  margin: 0 auto; /* 可选居中 */
}

clamp(最小宽度, 理想宽度, 最大宽度)的逻辑很直接：

• 当屏幕宽度小于约889px时，卡片宽度为屏幕的90%；
• 当父容器宽度处于90vw到800px之间时，卡片占满父容器的全部可用宽度；
• 当父容器宽度超过800px时，卡片固定为800px宽。

原代码未达预期的原因 #

你原来的代码width:100%; max-width:300px，效果是卡片最大宽度被限制在300px，一旦屏幕宽度超过300px，卡片就会固定为300px，这和你“大屏占满可用宽度”的需求不符。要么调大max-width的数值，要么改用上面的clamp/min写法即可解决。

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