Foundation - Media Queries

Media queries are CSS3 module that include media features such as width, height, color and displays the content as per specified screen resolution.
Foundation uses following media queries to create breakdown ranges:

• Small: Used for any screen.
• Medium: It is used for screen 640 pixels and wider.
• Large: It is used for screen 1024 pixels and wider.

You can change the screen size by using 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 below 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 $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, and 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 below 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 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 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:

S.N.	Name & Description	Type	Default Value
1	$breakpoints It is a breakpoint name which can be used to write the media queries by using breakpoint() mixin.	Map	small: 0px medium: 640px large: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes You can change the CSS class output by modifying the $breakpoint-classes variable.	List	small medium large

Mixins

Mixins creates 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 below values:

• If string is passed, then mixin search the string in the $breakpoints map and creates the media query.
• If your using pixel value, then convert it to em value using $rem-base.
• If rem value is passed, then changes its unit to em.
• If you are using em value, then it can be used as-is.

The below table specifies the parameter used by the breakpoint:

S.N.	Name & Description	Type	Default Value
1	$value It 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 below table specifies the possible input value used by the breakpoint:

S.N.	Name & Description	Type	Default Value
1	$val It is 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 that screen must be wide at least as a breakpoint.
• .get: It is used to get the media query of the breakpoint.

The below table specifies the parameter used by above functions:

S.N.	Name & Description	Type
1	size It checks and gets the name of the breakpoint for the specified functions respectively.	String