Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

CSS media queries #37

Copy link
Copy link
Open
Open
Copy link
@dtolnay

Description

@dtolnay
Issue body actions

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.