CSS media queries

Really helpful advice from @ssokolow on reddit:

I don't have time to work on it, but here's a quick introduction to CSS media queries, which allow you to assign different CSS rules to different viewport sizes.

https://css-tricks.com/css-media-queries/

(Optionally in concert with the CSS page-break properties, media queries also allow you to make your pages print beautifully... for example, by hiding all elements that only exist to be interacted with and replacing colour cues with other formatting.)

They're supported on all browsers with market share visible in caniuse.com's "Usage relative" mode except IE8, which is estimated to have a 0.42% global market share.

Unfortunately, support for interaction media features is not currently present in Firefox, 4.x versions of the default Android browser, or IE, so any rule you write to inflate your buttons in the presence of coarse (touch/kinect/wii) input will only apply on about 2/3rds of the browsers out there (desktop browsers included in that count).

For now, if you want to inflate your buttons for easy touch, I'd consider using interactions queries for iOS/Opera/Chrome devices and then using resolution queries (with the dpi unit for maximum compatibility) anded together with a query for a small screen size (to exclude Retina/HiDPI desktop/laptop screens) as a fallback to catch things like Firefox Mobile on smartphones.

The issue links CSS media-query resources and proposes an introduction covering viewport sizes, printing, and interaction or resolution features. Start by locating the site's existing CSS guidance pages; done means adding a clearly scoped introduction with the relevant links and browser-support caveats.