FullStackCamp

Coding

Marketing

Prompts

Tools

CSS Media Queries

Introduction to CSS Media Queries

CSS media queries enable responsive web design by applying styles based on device characteristics, such as screen size, orientation, or resolution. They are crucial for creating layouts that adapt seamlessly across desktops, tablets, and smartphones.

  • Purpose: Deliver optimized user experiences tailored to different devices.
  • Role in CSS: Foundation for responsive and adaptive design in modern web development.

Media Query Syntax

A media query consists of a media type and one or more conditions (features) that must be met for the styles to apply.

  • Basic Structure: @media (condition) { /* styles */ }
  • Media Types: all (default), screen, print.
  • Media Features: width, min-width, max-width, orientation, resolution.
  • Logical Operators: and, not, only, or commas for multiple conditions.

Example: Basic media query:

<style>
    .container {
        background: lightblue;
    }
    @media (max-width: 600px) {
        .container {
            background: lightgreen;
        }
    }
</style>
<div class="container">Responsive Box</div>

Common Media Features

Media queries use features to target specific device properties:

  • Width/Height: min-width, max-width, min-height, max-height (e.g., min-width: 768px).
  • Orientation: orientation (portrait orlandscape).
  • Resolution: min-resolution for high-DPI displays (e.g., min-resolution: 2dppx for Retina).
  • Aspect Ratio: aspect-ratio (e.g., aspect-ratio: 16/9).
  • Hover Capability: hover (hover ornone) for devices with or without hover support.

Example: Targeting screen size and orientation:

<style>
    body {
        font-size: 16px;
    }
    @media (min-width: 1024px) and (orientation: landscape) {
        body {
            font-size: 18px;
        }
    }
</style>
<p>Text size changes on large screens in landscape mode.</p>

Breakpoints for Responsive Design

Breakpoints are specific screen sizes where layouts change. Common breakpoints align with device categories:

  • Mobile: max-width: 576px
  • Tablet: min-width: 768px
  • Desktop: min-width: 992px
  • Large Desktop: min-width: 1200px
  • Use min-width for mobile-first design (styles scale up) or max-width for desktop-first (styles scale down).

Example: Mobile-first breakpoints:

<style>
    .box {
        width: 100%;
        padding: 10px;
    }
    @media (min-width: 768px) {
        .box {
            width: 50%;
        }
    }
    @media (min-width: 1200px) {
        .box {
            width: 33%;
        }
    }
</style>
<div class="box">Responsive Box</div>

Advanced Media Queries

Modern media queries support advanced features for accessibility and device capabilities:

  • Prefers Color Scheme: prefers-color-scheme (light, dark) for dark mode styling.
  • Prefers Reduced Motion: prefers-reduced-motion (reduce) for users sensitive to animations.
  • Pointer Accuracy: pointer (fine, coarse) for mouse vs. touch devices.

Example: Dark mode and reduced motion:

<style>
    .card {
        background: white;
        transition: transform 0.3s;
    }
    @media (prefers-color-scheme: dark) {
        .card {
            background: #333;
            color: white;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .card {
            transition: none;
        }
    }
</style>
<div class="card">Adaptive Card</div>

Combining with Layouts

Media queries work with Flexbox and Grid to adjust layouts dynamically:

  • Change flex-direction or grid-template-columns at different breakpoints.
  • Adjust gaps, margins, or font sizes for better readability.

Example: Responsive Grid layout:

<style>
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    @media (min-width: 768px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width: 1024px) {
        .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
</style>
<div class="grid">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Best Practices for Media Queries

  • Mobile-First Approach: Start with base styles for smaller screens, then add styles for larger screens using min-width.
  • Keep It Simple: Use a few key breakpoints to avoid overly complex stylesheets.
  • Accessibility: Support prefers-color-scheme and prefers-reduced-motion for inclusivity.
  • Test Thoroughly: Check layouts on real devices or browser dev tools.
  • Organize Code: Group media queries at the end of stylesheets or use CSS preprocessors for better management.

Example: Mobile-first with accessibility:

<style>
    :root {
        --bg-color: white;
        --text-color: black;
    }
    body {
        background: var(--bg-color);
        color: var(--text-color);
        font-size: 16px;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-color: #222;
            --text-color: white;
        }
    }
    @media (min-width: 768px) {
        body {
            font-size: 18px;
        }
    }
</style>
<p>Responsive and accessible text</p>

Hands-On Activity

Create an HTML page with an external CSS file that:

  • Uses a mobile-first approach to style a full-width div with padding.
  • Adjusts the div to 50% width and changes its background color at a tablet breakpoint (min-width: 768px).
  • Adds a dark mode style using prefers-color-scheme.

Sample Solution:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">Responsive Content</div>
</body>
</html>

/* styles.css */
.content {
    width: 100%;
    padding: 15px;
    background: lightyellow;
}
@media (prefers-color-scheme: dark) {
    .content {
        background: darkgray;
        color: white;
    }
}
@media (min-width: 768px) {
    .content {
        width: 50%;
        background: lightblue;
    }
}