CSS Media Queries

Overview

Media queries allow you to apply different CSS styles based on device characteristics like screen size, orientation, and resolution.

Basic Syntax

@media (condition) {
    /* CSS rules apply when condition is true */
}

Media Query Types

Screen Width

/* Mobile devices */
@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop devices */
@media (min-width: 1024px) {
    .container {
        width: 970px;
        margin: 0 auto;
    }
}

Device Orientation

/* Landscape orientation */
@media (orientation: landscape) {
    .sidebar {
        float: left;
        width: 300px;
    }
}

/* Portrait orientation */
@media (orientation: portrait) {
    .sidebar {
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }
}

Resolution

/* High resolution displays */
@media (min-resolution: 2dppx) {
    .logo {
        background-image: url('logo@2x.png');
        background-size: 100px 50px;
    }
}

/* Standard resolution */
@media (max-resolution: 1.5dppx) {
    .logo {
        background-image: url('logo.png');
    }
}

Logical Operators

AND Operator

@media (min-width: 768px) and (max-width: 1023px) {
    /* Styles apply when both conditions are true */
    .content {
        padding: 20px;
    }
}

OR Operator (Comma)

@media (max-width: 767px), (orientation: portrait) {
    /* Styles apply when either condition is true */
    .navigation {
        position: fixed;
        top: 0;
    }
}

NOT Operator

@media not (min-width: 1024px) {
    /* Styles apply when condition is false */
    .sidebar {
        display: none;
    }
}

Media Features

Width and Height

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-height: 600px) {
    .footer {
        position: fixed;
        bottom: 0;
    }
}

Aspect Ratio

@media (aspect-ratio: 16/9) {
    .video-container {
        padding-bottom: 56.25%; /* 9/16 * 100 */
    }
}

@media (aspect-ratio: 4/3) {
    .video-container {
        padding-bottom: 75%; /* 3/4 * 100 */
    }
}

Device Type

/* Screen devices */
@media screen {
    .content {
        font-size: 16px;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
    
    .content {
        font-size: 12pt;
        color: black;
    }
}

/* Speech readers */
@media speech {
    .hidden-text {
        speak: none;
    }
}

Advanced Media Queries

Range Media Features

/* Using ranges */
@media (width >= 768px) and (width <= 1023px) {
    .tablet-layout {
        display: block;
    }
}

/* Color capabilities */
@media (color) {
    .color-element {
        background: linear-gradient(45deg, red, blue);
    }
}

@media (monochrome) {
    .monochrome-element {
        background: #333;
        color: #fff;
    }
}

Hover and Pointer Media

/* Devices with hover capability */
@media (hover: hover) {
    .button:hover {
        transform: scale(1.05);
    }
}

/* Touch devices */
@media (hover: none) {
    .button {
        padding: 15px; /* Larger touch targets */
    }
}

/* Pointing device */
@media (pointer: fine) {
    .link {
        text-decoration: underline;
    }
}

@media (pointer: coarse) {
    .link {
        text-decoration: none;
        border-bottom: 2px solid blue;
    }
}

Common Patterns

Mobile-First Approach

/* Base styles (mobile-first) */
.container {
    width: 100%;
    padding: 0 15px;
}

/* Progressive enhancement */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .container {
        width: 970px;
    }
}

Desktop-First Approach

/* Base styles (desktop-first) */
.container {
    width: 970px;
    margin: 0 auto;
}

/* Graceful degradation */
@media (max-width: 1023px) {
    .container {
        width: 750px;
    }
}

@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
}

Responsive Typography

/* Base font size */
html {
    font-size: 16px;
}

/* Adjust for different screen sizes */
@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 20px;
    }
}

/* Using clamp for fluid typography */
.heading {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

Performance Tips

/* Use efficient media queries */
@media (min-width: 768px) {
    /* Good: Specific breakpoint */
}

/* Avoid complex conditions */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    /* May be less performant */
}

/* Group related styles */
@media (max-width: 767px) {
    .mobile-nav,
    .mobile-content,
    .mobile-footer {
        /* All mobile-specific styles */
    }
}