使用 calc() 模拟媒体查询

Rémi Parmentier 提供了一个货真价实的 CSS 技巧。 它在这里用于电子邮件的上下文中，但它本身就是一个巧妙的技巧。

这就是技巧

/* When parent is 500px wide... */
.block {
  min-width: 50%;   /* 250px WINNER */
  max-width: 100%;  /* 500px */
  width: calc(480px - 100%) * 480); /* -9600px */
}

/* When parent is 400px wide... */
.block {
  min-width: 50%;  /* 200px */
  max-width: 100%; /* 400px WINNER */
  width: calc(480px - 100%) * 480); /* 38400px */
}

简化演示。

直接链接 →