Foundation CSS Media Queries

Last Updated : 18 Sep, 2023

Foundation CSS Media Queries provides a set of predefined media queries that cover a wide range of device sizes. These media queries are categorized into different breakpoints, which are defined by the screen widths at which the layout should adapt. By utilizing these breakpoints, developers can create responsive designs that adjust fluidly across various screen sizes.

Foundation CSS Media Query Components:

Default Media Queries: Refers to the default breakpoints mentioned as follows:
- Small: for any screen size.
- Medium: any screen having 640 pixels or larger screen size.
- Large: any screen having 1024 pixels or larger screen size.
Changing the Breakpoints: Refers to the custom breakpoints using user-defined values. It uses the $breakpoint variable in which the user can set custom values for different media.
Sass: Refers to the Sass variables used in styling. The breakpoint mixins can be used with the named variable or with values in px, rem, and em. e.g., breakpoint(medium/640px/40rem)
JavaScript: Foundation JavaScript has a predefined object to work with the media queries. It can be used with the help of the Foundation.MediaQuery Object.
Sass Reference: Foundation also includes the Sass variables like $breakpoints, $breakpoint-classes, $-zf-size, etc.
JavaScript Reference: Refers to the JavaScript methods used in Foundation CSS with the help of the foundation.core.js plugin to access the HTM elements.

To leverage Foundation CSS media queries, developers can either use the pre-defined breakpoints or customize them according to their requirements. By enclosing the specific CSS styles within the corresponding media query block, the styles will be applied selectively based on the device’s screen size.

Syntax

To apply a different background color for small screens, we can use the following Foundation CSS media query syntax:

@media only screen and (max-width: 640px) {
    body {
        background-color: #f2f2f2;
    }
}

In this code snippet, the background-color style will only be applied to the body element when the screen width is smaller than or equal to 640 pixels, targeting small screens.

Example: This example illustrates the basic usage of the Foundation CSS Media Queries.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
        Foundation CSS Media Queries 
        Example 
    </title> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css"> 
    <style> 
      
        /* Custom styles */ 
        @media only screen and (max-width: 640px) { 
          
            /* Styles for small screens */ 
            .small-screen { 
                background-color: #f2f2f2; 
                color: #333; 
                padding: 20px; 
            } 
        } 
          
        @media only screen and (min-width: 641px) and 
            (max-width: 1024px) { 
          
            /* Styles for medium screens */ 
            .medium-screen { 
                background-color: #d2d2d2; 
                color: #fff; 
                padding: 40px; 
            } 
        } 
          
        @media only screen and (min-width: 1025px) { 
          
            /* Styles for large screens */ 
            .large-screen { 
                background-color: #a2a2a2; 
                color: #fff; 
                padding: 60px; 
            } 
        } 
          
        @media only screen and (min-width: 1441px) { 
          
            /* Styles for extra-large screens */ 
            .xlarge-screen { 
                background-color: #666; 
                color: #fff; 
                padding: 80px; 
            } 
        } 
    </style> 
    <script src= 
"https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks</h1> 
    <h3> 
        Foundation CSS Media Queries 
    </h3> 
  
    <div class="small-screen medium-screen  
                large-screen xlarge-screen"> 
        <h2>Responsive Content</h2> 
        <p> 
            This content will adapt 
            based on the screen size. 
        </p> 
    </div> 
</body> 
  
</html>