Edit 2017: This article was originally written for Foundation 5, but I’ve updated it for the new way Foundation 6 uses CSS @includes for media queries.
I really like the way Foundation 6 makes media queries easy by putting them into variables, so that I can easily put breakpoint into a CSS class. Like this:
.my-class {
font-size: 1rem;
@include breakpoint(medium up) {
font-size: 2rem;
}
}
I’ve written before about the way I write media queries (see here), and I think this is the best way to avoid hunting through documents to find a selector that might be in a separate breakpoint somewhere.
However I sometimes want to combine multiple breakpoints to save duplication. For a long time I thought this wasn’t possible, but you actually can by writing it like this:
@media screen and #{breakpoint(small only)} and #{breakpoint(large up)} {
}
I find this useful with height breakpoints
Sometimes I need to use a media query that detects the height, to make sure we’re not using elements that are too large.
I’ve made my own height media queries as variables:
$short-only: "(max-height:600px)" !default; $tall-up: "(min-height:601px)" !default;
I use “short” and “tall” for height like you’d use “medium” & “large” for width (maybe Foundation should change their variable names to “narrow” and “wide” instead?).
So I can do this sort of thing to change heading menu font size if the screen is really wide, and definitely tall too.
@media screen and #{breakpoint(large)} and #{$tall-up} {
font-size: rem-calc(36px);
}