Puppy's Guide to Media Queries!
Hi! I'm Puppy (Permanent) and I do css on JAI! This is a quick rundown of how to use media queries on JAI to size your elements according to the screen and viewport size! This guide is a WIP. If you see any errors or have any questions, don't hesitate to contact me on discord @ permanentsky.
Media query? I hardly know her!
What's here?
What is a media query?
In CSS, media query is the use of the @media
rule which adds a block of code where you certain properties are applied/changed under the specified conditions.
Example: When the screen is a certain size, the media query will change the background from blue to red.
Media queries are used to help create responsive layouts and consistent designs across different screens.
A full media query is structured like:
@media not/only [mediatype] and ([media feature]) and ([media feature]) {
CSS element changes you want applied under the query conditions...
}
@media the at media rule to open up the query
not/only OPTIONAL: 'not' is used to negate/reverse the logic of the query, 'only' is usually used on depreciated browsers to apply the style ONLY when the mediatype is matched (the use of 'only' must be followed with a mediatype e.g.
@media only screen
)
[mediatype] specifies the type of media being targetted, usually this is
screen
to target devices with a screen orall
to match all devices. If a mediatype is not specified, then it is defaulted toall
e.g.@media all
e.g.@media screen
([media feature]) defines the feature(s) that the query is trying to match, such as the width of screen or the orientation (portrait/landscape). Most common are the
min-width
andmax-width
media features (explained further below).
e.g.@media screen (max-width: SIZE)
([media feature]) OPTIONAL: defines a second feature that the query must satisfy the constraints of to be applied. Again, most common are
min-width
and/ormax-width
.
and the operator that combines multiple media features into a single media query. The query must satisfy both features to be applied
e.g.@media (min-width: SIZE1) and (max-width: SIZE2)
which will only apply to devices between SIZE1 and SIZE2 screens
Min-width media queries
The min-width
media feature is used to target media types that are equal to the specified width or wider.
E.g. min-width: 500px
means that any css changes in the query will apply to viewports that are 500px wide or bigger. Properties outside of the query will be the default for screens under 499px, while the properties inside of your query will apply on all screens equal to or larger than 500px.
Max-width media queries
The max-width
media feature is used to target media types that are equal to the specified width or smaller.
E.g. max-width: 500px
means that any css changes in the query will apply to viewports that are 500px wide or narrower (from 500px to 0px). Properties outside of the query will be the default for screens larger than 501px, while the properties inside of your query will apply on all screens equal to or smaller than 500px.
Common breakpoints
A breakpoint is a screen size or viewport size where you can set your media query to change the layout and properties for devices in that range. Having multiple breakpoints can optimize for different viewing and user experience.
JAI has 2 existing media queries for some of their elements:
@media screen and (min-width: 62em)
(or 992px) for widescreen and desktop and @media screen and (min-width: 48em)
(or 768px) for tablets.
Other useful breakpoints include:
Screen Size | Max-width query | Min-width query |
---|---|---|
X-Small devices (portrait phones, less than 576px) | @media (max-width: 575.98px) {---} |
Default Properties |
Small devices (landscape phones, less than 768px or 576px and up) | @media (max-width: 767.98px) { --- } |
@media (min-width: 576px) { --- } |
Medium devices (tablets, less than 992px or 768px and up) | @media (max-width: 991.98px) { --- } |
@media (min-width: 768px) { --- } |
Large devices (desktops, less than 1200px or 992px and up) | @media (max-width: 1199.98px) { --- } |
@media (min-width: 992px) { --- } |
X-Large devices (large desktops, less than 1400px or 1200px and up) | @media (max-width: 1399.98px) { --- } |
@media (min-width: 1200px) { --- } |
XX-Large devices (larger desktops, 1400px and up) | Default Properties | @media (min-width: 1400px) { --- } |
Examples
In the following examples, the element .box
is used as an example element where:
Single Media Feature Query
For the simplest media query with only one media feature, we will use a single breakpoint. In this scenario, we have .box
which has a blue background by default. If we want to make it so that the background colour changes to red on x-small screen devices that are less than 576px, the query would look like:
Combining Min- and Max- Queries
If we want property changes to only apply within a certain range of screen sizes, min-width
and max-width
media features can be combined with the and
operator. In this scenario, we have .box
which has a blue background by default. If we want to make it so that the background colour changes to red on screens that are wider than 500px and smaller than 1000px, the query would look like:
A little aside:
The query in this example can also be written as @media screen and (500px <= width <= 1000px)
which uses a simpler syntax, but I really didn't want to get into it. You can check out more of the resources below if you're looking for constructing level 4 or other level queries.
Multiple Queries
If we want property changes to be unique on multiple different devices, multiple media queries can be used in succession. Order here is important! When you have two rules that apply to the same element and/or property, the last declared rule will be applied, that is, your last query will be the one selected.
In this scenario, we have .box
which has a blue background by default. If we want to make it so that the background colour changes to red on screens 600px or smaller and then becomes purple on screens 400px or smaller, the query would look like:
This means that on screensizes between 401px to 600px, the background of .box
will be red. For screensizes between 0 to 400px, the background of .box
will be purple.
More Resources
- W3C Media Queries Level 4 Documentation
- MDN Web Docs @media rule documentation
- MDN Web Docs Using media queries
- MDN Web Docs Media query fundamentals
- W3Schools Media Queries documentation
- W3Schools Media Query examples
- W3Schools Responsive Web Design with Media Query
- CSS Tricks Media Queries Guide
- How to do CSS breakpoints
- Min-width and Max-Width Explained
That's it! Thanks for reading!