foundations media queries

Combining media queries in Foundation

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);
}