Using calc() to fake a media query

A bonafide CSS trick by Rmi 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 …

Using calc() to fake a media query is a post from CSS-Tricks