❮ Previous Next ❯

CSS Media Queries

  • Learn CSS media queries to make web designs responsive across devices.

  • What Are CSS Media Queries ?

    CSS Media Queries allow you to apply CSS only when certain conditions are met, such as screen width, device type, or orientation.

    In simple words:

    Media Queries tell CSS: “Apply this style only when this condition is true.”

    They are the backbone of responsive web design.

    Why CSS Media Queries Are important

    Without media queries:

    Website looks good only on desktop
    Mobile users struggle to read or navigate
    Layout breaks on tablets

    With media queries:

    Responsive design
    Better user experience
    One website for all devices

    Real-life comparison:
    Same person, different weather → different clothes.
    Same website, different screens → different styles.

    Main Uses of Media Queries

    Responsive Design

    Responsive design means:

    No horizontal scrolling
    Easy reading on small screens
    Layout adapts automatically

    Media queries help change:

    • Layout
    • Font sizes
    • Spacing
    • Navigation style

    Device Adaptation

    Media queries allow styling for:

    • Mobile phones
    • Tablets
    • Laptops
    • Large desktop screens

    Real-life comparison:
    TV remote buttons are larger than mobile buttons — same function, different size.

    Basic Syntax of Media Queries

    @media (condition) {

      /* CSS rules */

    }

Responsive Design & Media Queries

Responsive design ensures a website adapts to different screen sizes using flexible layouts and media queries. 

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

  • Styles apply only when screen width ≤ 768px

    Most Common Media Features

    max-width (Most Used)

    Applies styles up to a certain screen width.

Media Query – max-width (Most Used)

max-width applies styles when the screen width is less than or equal to a specified value. 

@media (max-width: 600px) {
  p {
    font-size: 14px;
  }
}

  • Commonly used for mobile layouts

    min-width

    Applies styles from a certain width and above.

Media Query – min-width

min-width applies styles when the screen width is greater than or equal to a specified value. 

@media (min-width: 1024px) {
  body {
    max-width: 1200px;
  }
}

  • Used for tablets, laptops, and desktops

    Combining Conditions

Combining Media Query Conditions

You can combine multiple conditions using and to apply styles within a specific screen size range. 

@media (min-width: 600px) and (max-width: 900px) {
  .box {
    background-color: yellow;
  }
}

  • Targets tablet devices

    Common Breakpoints (Industry Guidelines)

    DeviceScreen Width
    Mobile≤ 600px
    Tablet601px – 900px
    Laptop901px – 1200px
    Desktop> 1200px

    These are guidelines, not strict rules.

Practical Responsive Layout

This example uses Flexbox for desktop layout and a media query to stack boxes vertically on mobile screens. 

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Layout Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        /* Desktop Default */
        .container {
            display: flex;
            gap: 10px;
        }

        .box {
            flex: 1;
            padding: 20px;
            border: 1px solid black;
            text-align: center;
        }

        /* Mobile View */
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

  • Desktop → boxes side by side
    Mobile → boxes stacked vertically

    Real-life comparison:
    Furniture rearranged when moving to a smaller room.

    Media Queries for Text (Responsive Typography)

Responsive Typography

Media queries adjust font sizes based on screen size to improve readability on different devices. 

h1 {
  font-size: 32px;
}

@media (max-width: 600px) {
  h1 {
    font-size: 22px;
  }
}

  • Text remains readable on all devices

    Media Queries for Navigation

Responsive Navigation

Media queries can modify navigation layout for smaller screens, such as hiding menus or changing styles. 

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

  • Hide desktop menu
    Replace with hamburger menu

    Real-life comparison:
    Foldable menu card in restaurants.

    Orientation-Based Media Queries

Orientation-Based Media Queries

Orientation media queries apply styles based on whether the device is in landscape or portrait mode. 

@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

  • Detects portrait vs landscape mode

    Mobile-First Media Queries

Mobile-First Media Query Approach

Mobile-first design starts with styles for small screens and then enhances the layout for larger screens using min-width. 

body {
  font-size: 14px;  /* Mobile default */
}

@media (min-width: 768px) {
  body {
    font-size: 16px;  /* Larger screens */
  }
}

  • Start small
    Scale up gracefully

    Common Mistakes

    Too many breakpoints
    Designing only for desktop
    Forgetting real mobile testing
    Using fixed widths instead of flexible units

    Best Practices for Media Queries

    Follow mobile-first approach
    Keep breakpoints logical
    Use flexible units (% , rem , vw)
    Combine with Flexbox & Grid
    Test on real devices

    Media Queries = condition-based CSS
    Different screens → different layouts
    One website → all devices

    CSS Media Queries make websites responsive
    Control layout using screen conditions
    min-width & max-width are most common
    Core skill for modern web development
    Very important interview topic

❮ Previous Next ❯