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 −

Sr.No.	Name & Description	Type	Default Value
1	$breakpointsIt is a breakpoint name which can be used to write the media queries by using breakpoint() mixin.	Map	small: 0pxmedium: 640pxlarge: 1024pxxlarge: 1200pxxxlarge: 1440px
2	$breakpoint-classesYou can change the CSS class output by modifying the $breakpoint-classes variable.	List	small medium large

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 −

Sr.No.	Name & Description	Type	Default Value
1	$valueIt is processes the values by using breakpoint name, px, rem or em values.	keyword or number	None

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 −

Sr.No.	Name & Description	Type	Default Value
1	$valIt processes the values by using breakpoint name, px, rem or em values.	keyword or number	small

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 −

Sr.No.	Name & Description	Type
1	sizeIt checks and gets the name of the breakpoint for the specified functions respectively.	String