Media Queries Using EMs
Added Thursday 29th December 2011, by Stuart Robson
With some posts about breakpoints being dead and comments mentioning we could use ems instead of px for our breakpoints I thought I'd create this little 'boilerplate' snippet
/* ===== == = === 20em (320px) === = == ===== */
@media only screen and (min-width : 20em) {
}
/* ===== == = === 30em (480px) === = == ===== */
@media only screen and (min-width : 30em) {
}
/* ===== == = === 37.5em (600px) === = == ===== */
@media only screen and (min-width: 37.5em) {
}
/* ===== == = === 48em (768px) === = == ===== */
@media only screen and (min-width : 48em) {
}
/* ===== == = === 56.25em (900px) === = == ===== */
@media only screen and (min-width : 56.25em) {
}
/* ===== == = === 68.75em (1100px) === = == ===== */
@media only screen and (min-width : 68.75em) {
}
/* ===== == = === 81.25em (1300px) === = == ===== */
@media only screen and (min-width : 81.25em) {
}