Foundation - Media Queries

Media queries are CSS3 module that include media features such as width, height, color and displays the content as per the specified screen resolution.

Foundation uses the following media queries to create breakdown ranges −

• Small − Used for any screen.

• Medium − It is used for screens of 640 pixels and wider.

• Large − It is used for screens of 1024 pixels and wider.

You can change the screen size by using the breakpoint classes. For instance, you can use .small-6 class for small sized screens and .medium-4 class for medium sized screens as shown in the following code snippet −

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Changing the Breakpoints

You can change the breakpoints, if your application uses SASS version of Foundation. You can place the breakpoints name under the $breakpoints variable in the settings file as shown below −

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

You can change the breakpoints classes in the settings file by modifying the $breakpoint-classes variable. If you want to use .large class in the CSS, then add it to the end of the list as shown below −

$breakpoints-classes: (small medium large);

Suppose, you want to use .xlarge class in the CSS, and then add this class to the end of the list as shown below −

$breakpoints-classes: (small medium large xlarge);

SASS

The Breakpoint Mixin

• You can write the media queries by using breakpoint() mixin along with @include.

• Use the down or only keywords along with the breakpoint value to change the behavior of the media query as shown in the following code format −

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

You can use three media queries portrait, landscape and retina for device orientation or pixel density and they are not width based media queries.

Breakpoint Function

• You can use the functionality of breakpoint() mixin by using the internal function.

• The breakpoint() functionality can be used directly to write own media queries −

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Working with Media Queries

• The Foundation JavaScript provides the MediaQuery.current function to access current breakpoint name on the Foundation.MediaQuery object as specified below −

Foundation.MediaQuery.current

• The MediaQuery.current function displays small, medium, large as current breakpoint names.

• You can get the media query of breakpoint using the MediaQuery.get function as shown below −

Foundation.MediaQuery.get('small')

Sass Reference

Variables

The following table lists the SASS variables, which can be used to customize the default styles of the component −

Mixins

Mixins creates a group of styles to build your CSS class structure for the Foundation components.

BREAKPOINT

It uses breakpoint() mixin to create media queries and includes the following activities −

• If string is passed, then mixin searches the string in the $breakpoints map and creates the media query.

• If you are using pixel value, then convert it to em value using $rem-base.

• If rem value is passed, then it changes its unit to em.

• If you are using em value, then it can be used as it is.

The following table specifies the parameter used by the breakpoint −

Functions

BREAKPOINT

It uses breakpoint() mixin to create media queries with matching input value.

The following table specifies the possible input value used by the breakpoint −

JavaScript Reference

Functions

There are two types of functions −

• .atLeast − It checks the screen. It must be wide at least as a breakpoint.

• .get − It is used to get the media query of the breakpoint.

The following table specifies the parameter used by above functions −