« Media Queries Using EMs

Added Friday 30th 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) {

}

Copy this code to your clipboard