? CSS `@media` Queries

⚡ Quick Overview

CSS @media queries allow you to apply different styles based on the device’s characteristics, such as screen width, height, orientation, and resolution. They are the backbone of responsive web design, helping your website look great on mobiles, tablets, laptops, and desktops.

? Key Concepts

Media type – e.g., screen, print.
Media features – e.g., max-width, min-width, orientation.
Breakpoints – specific screen widths where layout changes.
Logical operators – and, not, only to combine conditions.
Mobile-first – write base styles for mobile, then enhance for larger screens using min-width.

? Syntax of Media Queries

A media query checks one or more conditions about the device or viewport. If the condition is true, the CSS rules inside the block are applied.

? View Code Example

/* Basic media query syntax */
@media media-type and (condition) {
selector {
property: value;
}
}

⚙️ Basic Example: Screen Width

Change the background color when the screen width is smaller than or equal to 600px.

? View Code Example

/* For screens smaller than or equal to 600px */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

? Output / Explanation

When the viewport width is 600px or less (small phones, narrow windows), the whole page’s background becomes light blue. On wider screens, the background uses the default color.

? Example: Changing Layout on Larger Screens

Use a breakpoint at 768px to switch from a stacked layout to a horizontal (flex) layout.

? View Code Example

/* Switch to horizontal layout on wider screens */
@media screen and (min-width: 768px) {
.container {
display: flex;
flex-direction: row;
}
}

? Output / Explanation

When the screen width is 768px or more (tablets in landscape, laptops), elements inside .container will be displayed in a row, creating a multi-column layout. On smaller screens, they stay stacked vertically.

? Example: Orientation-Based Styling

You can also react to device orientation, such as portrait or landscape.

? View Code Example

/* Increase text size in landscape orientation */
@media screen and (orientation: landscape) {
body {
font-size: 18px;
}
}

? Output / Explanation

When the device is held in landscape mode, the body text becomes larger (18px), making better use of the wider screen space. In portrait mode, the default font size is used.

? Example: Combined Conditions

You can combine max-width with orientation to target very specific scenarios.

? View Code Example

/* Small landscape screens (e.g., some phones turned sideways) */
@media screen and (max-width: 700px) and (orientation: landscape) {
.hero-text {
text-align: center;
font-size: 1.1rem;
}
}

? Output / Explanation

This rule activates only when the screen is in landscape mode and the width is 700px or less. The .hero-text is centered and slightly resized to stay readable on small horizontal screens.

? Tips & Best Practices

Create breakpoints for small (mobile), medium (tablet), and large (desktop) screens.
Prefer mobile-first design: write base styles, then enhance with min-width queries.
Use relative units like %, rem, and vw instead of fixed px wherever possible.
Combine multiple conditions using the and keyword for fine-grained control.
Group related media queries to keep your CSS organized and easier to maintain.
Test frequently on real devices or using browser dev tools’ responsive mode.

? Try It Yourself / Practice Tasks

Create a div that has one background color for screens less than 500px and a different color for screens more than 800px using two media queries.
Use media queries to hide a horizontal menu bar on small screens and show a hamburger icon instead.
Write orientation-based media queries to change font size and layout when switching between portrait and landscape.
Make an image scale responsively (max width 100%) and center it on screens smaller than 600px.
Combine max-width and orientation to design a special layout for small landscape devices only.