Media query
A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
CSS in Depth, Second Edition
An @media query is a CSS conditional rule that applies styles when a media condition matches.
- How it is used
- Applies conditional CSS to adapt one page’s layout and styling to viewport size or other environmental conditions.
- How deep it goes
- Works through syntax, cascade behavior, condition types, units, and layered breakpoints, then applies them to page elements.
- Examples
- Uses a resizing panel, breakpoint-dependent navigation, three-column grid, and small-screen table treatment.
- What you can do after
- Build it from scratch by layering mobile-first CSS for spacing, navigation, and columns at appropriate breakpoints.
Read how CSS in Depth, Second Edition explains media query →
Tiny CSS Projects
A media query is a CSS conditional expression that tests media features or output conditions before applying styles.
- How it is used
- Applies conditional CSS to adapt layouts and interactions to viewport width, hover capability, and motion preference.
- How deep it goes
- Defines @media syntax and works through breakpoints and combined conditions, stopping at authored CSS rather than browser internals.
- Examples
- Uses a newspaper layout, hotel cards, and a checkout table to show conditional changes.
- What you can do after
- Build it from scratch with CSS @media rules that reshape card grids and make tables usable on narrow screens.
Web Design Playground
A CSS conditional rule that applies its enclosed styles only when the media type and/or media features match the current device or viewport.
- How it is used
- Adjusts page layout, element sizing, and visibility when screen-width conditions match.
- How deep it goes
- Defines @media syntax and width tests through annotated layout rules and breakpoint-selection guidance, without browser internals.
- Examples
- Uses a 450px layout that stacks article and aside, shrinks a heading, and changes a background; practices showing an aside at 1024px.
- What you can do after
- Evaluate/understand when a screen-width condition should change a layout and write matching @media rules.
D3.js in Action, Third Edition
A CSS media query is a conditional CSS construct that applies styles when specified device or viewport characteristics match.
- How it is used
- Uses conditional CSS rules to keep visualizations readable across screen sizes, orientations, and resized browser windows.
- How deep it goes
- Explains max-width and min-width breakpoints through responsive charts and grids, but stops short of detailed CSS query syntax.
- Examples
- Demonstrates line-chart adaptation and a dashboard containing rankings, scatterplot, and bar-chart visualizations.
- What you can do after
- Apply it via CSS to create breakpoint-based layouts that reorganize content and preserve readable responsive visualizations.
Read how D3.js in Action, Third Edition explains media query →
Web Design Playground, Second Edition
An @media rule is a CSS at-rule that conditionally groups stylesheet rules according to a media type or media feature.
- How it is used
- Adjusts layout, sizing, and visibility so pages adapt to viewport features such as screen width.
- How deep it goes
- Explains conditional syntax, width features, and grid changes, but stops short of broader media-feature coverage.
- Examples
- Demonstrates title resizing, sidebar display, and a three-column grid becoming a stacked mobile layout.
- What you can do after
- Apply it via CSS to resize elements, rearrange layouts, and control visibility at chosen viewport widths.
Read how Web Design Playground, Second Edition explains media query →
Build a Website with ChatGPT
A media query is a CSS conditional expression that applies styles according to characteristics such as viewport width or device capabilities.
- How it is used
- Adapts CSS Grid article layouts for smaller or larger screens by applying styles conditionally at viewport-width breakpoints.
- How deep it goes
- Defines conditional syntax and explains max-width and min-width with examples, stopping short of broader screen-feature queries.
- Examples
- Uses 500px one-column layouts, 1024px heading sizing, and smartphone verification of an article page.
- What you can do after
- Apply CSS media queries to change layouts and typography at specified viewport widths, then verify the result on a smartphone.
Read how Build a Website with ChatGPT explains media query →
The Well-Grounded Python Developer: How the pros use Python and Flask
A media query is a CSS condition that applies styles according to properties of the user agent or viewport, such as screen width or resolution.
- How it is used
- Uses viewport conditions to adapt a shared Bootstrap-based web page for smaller and larger devices.
- How deep it goes
- Explains conditional CSS, cascading overrides, and a 768-pixel breakpoint through one banner example.
- Examples
- Demonstrates a responsive banner that hides below 768 pixels and appears above that breakpoint.
- What you can do after
- Apply it by combining a default CSS rule with a breakpoint-specific override in a shared stylesheet.
Related concepts
- prefers-reduced-motionincludes · prefers-reduced-motion is a CSS media feature that indicates whether a user has requested reduced nonessential motion.
- responsive web designused by · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
- viewportuses · A viewport is the visible region through which a browser or graphical interface displays a document or content.
- CSSused by · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- min-widthincludes · The CSS min-width media feature matches when a viewport or output area is at least a specified width.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.