Using calc() to fake a media query | CSS-Tricks

A bonafide CSS trick by Rémi Parmentier. It’s used in the context of emails here, but it’s a clever trick in it’s own right.

This is the trick:

/* 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 */
}

Reduced demo.

Direct Link →