Using calc() to fake a media query
Category: Link
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 */
}Direct Link to Article — Permalink
Using calc() to fake a media query is a post from CSS-Tricks
LEAVE A REPLY
You must be logged in to post a comment.