CSS media queries

[dtolnay]

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.