How deeply does D3.js in Action, Third Edition cover media query?

Explains max-width and min-width breakpoints through responsive charts and grids, but stops short of detailed CSS query syntax.

Media query

As explained in 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.

A media query conditionally applies CSS styles when device or viewport characteristics match. In responsive visualizations, it adapts layouts, labels, and spacing to phones, tablets, desktops, and resized windows. section 9.1.2 section 9.2

Use media queries to change a visualization’s presentation as available space changes:

A desktop-first design can use max-width queries to progressively simplify layouts and focus on critical information at smaller widths. section 9.1.2
Responsive rules can rearrange dashboard visualizations across desktop, tablet, and mobile layouts without removing the underlying rows. section 9.3.1
Media queries address layout changes, while JavaScript resize listeners can handle behavior that CSS alone cannot provide. section 9.2

How D3.js in Action, Third Edition covers it

liveBook manning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

CSS in Depth, Second EditionAn @media query is a CSS conditional rule that applies styles when a media condition matches.
liveBook manning.com

Tiny CSS ProjectsA media query is a CSS conditional expression that tests media features or output conditions before applying styles.
liveBook manning.com

Web Design PlaygroundA CSS conditional rule that applies its enclosed styles only when the media type and/or media features match the current device or viewport.
liveBook manning.com

Web Design Playground, Second EditionAn @media rule is a CSS at-rule that conditionally groups stylesheet rules according to a media type or media feature.
liveBook manning.com

Build a Website with ChatGPTA media query is a CSS conditional expression that applies styles according to characteristics such as viewport width or device capabilities.
liveBook manning.com

The Well-Grounded Python Developer: How the pros use Python and FlaskA media query is a CSS condition that applies styles according to properties of the user agent or viewport, such as screen width or resolution.

Compare how 7 books explain media query →

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.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.