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.
Small − Used for any screen.
Medium − It is used for screens of 640 pixels and wider.
Medium − It is used for screens of 640 pixels and wider.
Large − It is used for screens of 1024 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>
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);

You can write the media queries by using breakpoint() mixin along with @include.
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 −
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.
You can use the functionality of breakpoint() mixin by using the internal 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 −
The breakpoint() functionality can be used directly to write own media queries −
@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}
The Foundation JavaScript provides the MediaQuery.current function to access current breakpoint name on the Foundation.MediaQuery object as specified below −
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.
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 −
You can get the media query of breakpoint using the MediaQuery.get function as shown below −
Foundation.MediaQuery.get('small')

The following table lists the SASS variables, which can be used to customize the default styles of the component −
$breakpoints
It is a breakpoint name which can be used to write the media queries by using breakpoint() mixin.
small: 0px
medium: 640px
large: 1024px
xlarge: 1200px
xxlarge: 1440px
$breakpoint-classes
You can change the CSS class output by modifying the $breakpoint-classes variable.
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 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 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 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.
If you are using em value, then it can be used as it is.
The following table specifies the parameter used by the breakpoint −
$value
It is processes the values by using breakpoint name, px, rem or em values.
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 −
$val
It processes the values by using breakpoint name, px, rem or em values.
There are two types of functions −
.atLeast − It checks the screen. It must be wide at least as a breakpoint.
.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.
.get − It is used to get the media query of the breakpoint.
The following table specifies the parameter used by above functions −
size
It checks and gets the name of the breakpoint for the specified functions respectively.

    117 Lectures 
     5.5 hours 

 Shakthi Swaroop

    61 Lectures 
     1.5 hours 

 Hans Weemaes

    17 Lectures 
     4 hours 

 Stephen Kahuria

    8 Lectures 
     50 mins

 Zenva

    28 Lectures 
     2 hours 

 Sandra L

    16 Lectures 
     2.5 hours 

 GreyCampus Inc.
 Print
 Add Notes
 Bookmark this page