A module that contains functions for comparing Screen Metrics against Screen Buckets so you can change your app's functionality or presentation based on how big the user's screen is.
This module also contains optional pre-built Buckets.
Depending on the situation you need, you can either check via:
All methods use the same Bucket data type, but doing anything with data in Elm is slower because it relies on JavaScript. So when doing presentation-related things with elm-css, always use the media queries wherever possible.
Wraps styles within a CSS media query that matches the given Screen Buckets.
It performs the equivalent of Css.Media.withMedia.
css [ Screen.withMedia [ handset, portable1, portable2 ]
[ height (px 32)
, overflow hidden
]
, Screen.withMedia [ portable3, wide ]
[ width (px 192)
, padding4 (px 64) (px 32) (px 32) (px 48)
]
]
{- this creates a media query that looks like this:
withMedia [ only screen [ minWidth (px 864), maxWidth (px 1051) ]
, only screen [ minWidth (px 1052) ]
]
-}See Screen.Bucket.toMediaQuery to see how the media queries for each bucket get made.
This doesn't use your model's Metrics because CSS media
queries don't get checked against the screen size within Elm,
but by the browsers directly.
These are the default buckets that come with this, but you can make your own with Screen.Bucket.
Because width tends to be more important than height in creating responsive interfaces, width buckets have more detail, with two parallel levels of detail for convenience - broad buckets, which are not numbered, and fine buckets, which are numbered.
A width bucket that covers all 'handset' buckets (handset1,
handset2 and handset3).
A 'handset' here refers to a device that can be held in one hand. This usually means phones.
This bucket can also encompass particularly narrow browser windows in desktop and tablets.
A width bucket that's 351px and under.
This represents the smallest handsets available in recent memory. This typically means devices below 4.7" in screen size.
Many of the devices in this bucket may be becoming archaic (by 2020 standards), but it's still a useful bucket, especially if you want to be inclusive to particularly small screen sizes, which require particular attention to make work in responsive design.
Device examples (in portrait):
A width bucket that's between 352 and 383px.
This typically represents devices that can be held in one hand but are not entirely operable with one hand. Nowadays, this typically means devices between 5" - 6" in screen size.
Device examples (in portrait):
A width bucket that's between 384 and 511px.
This represents devices that can be held in one hand, but are not operable with one hand. Nowadays this typically means devices between 6" - 7" in screen size.
Device examples (in portrait):
A width bucket that covers all 'portable' buckets (portable1,
portable2 and portable3).
'portable' buckets encompass these things:
A width bucket that's between 512 and 639px.
This encompasses the relatively archaic 7"/'flyer' tablet format in portrait, as well as particularly narrow windows in desktop and certain splitscreen tablet views.
Device examples (in portrait):
A width bucket that's between 640 and 863px.
This encompasses the most common tablet sizes in portrait. Typically between 8" and 11".
Device examples (in portrait):
A width bucket that's between 864 and 1055px.
This encompasses the largest tablets in portrait. Typically around 13".
Device examples (in portrait):
A width bucket that encompasses all 'wide' buckets
(wide1 and wide2).
Wide buckets encompass these things:
'wide' buckets are handy when you want to handle particularly wide interfaces for maximum productivity.
A width bucket that represents large tablets in landscape and small and budget laptops. (All in fullscreen.)
Example resolutions:
The widest width bucket this module offers. This represents typical desktop displays in fullscreen.
Desktop and other large displays. Example resolutions:
A height bucket representing handset devices (ie. phones) in landscape. The amount of vertical space is very limited.
The maximum of this bucket is the same as handset, but in height.
A height bucket representing small and regular tablets in landscape. The amount of vertical space is restricted.
This buckets bounds are the same as portable1 - portable2 but in height.
A height bucket representing large landscape tablet, laptop or desktop contexts. The amount of vertical space is generally ample.
The minimum of this bucket is the same as portable3, but in height.
Checks to see if the screen size (represented by
Metrics) matches any buckets that you provide.Useful when you want to swap out functionality, layouts or interface elements based on screen size.