Puppy's Guide to Media Queries! ttcool

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 or all to match all devices. If a mediatype is not specified, then it is defaulted to all
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 and max-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/or max-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.
breakpoint

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) { --- }

Source

Examples

In the following examples, the element .box is used as an example element where:

1
2
3
4
5
.box{
    width: 100px;
    height: 100px;
    background: blue;
}

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:

/* the element and it's properties that are outside of the query will be the default appearance */
.box{ 
    width: 100px;
    height: 100px;
    background: blue;
}

/* on x-small screens devices, such as portrait mobile phones, we want the background of the element to change to red */
@media screen and (max-width: 575.98px) {  /* defining the query, here 'screen' is optional */
    .box {/* the element we want to change */
        background: red; /* listing JUST the properties we want to change, in this case, the background */
    }
} /* make sure everything is contained inside of the braces {} of the media query */

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:

/* the element and it's properties that are outside of the query will be the default appearance */
.box{ 
    width: 100px;
    height: 100px;
    background: blue;
}

/* on screens smaller than 1000px and screens larger than 500px, such as landscape mobile phones and small tablets, we want the background of the element to change to red, otherwise the element will default back to blue */
@media screen and (min-width: 500px) and (max-width: 1000px) {  /* defining the query with 2 media features, here 'screen' is optional */
    .box {/* the element we want to change */
        background: red; /* listing JUST the properties we want to change, in this case, the background */
    }
} /* make sure everything is contained inside of the braces {} of the media query */

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:

/* the element and it's properties that are outside of the query will be the default appearance */
.box{ 
    width: 100px;
    height: 100px;
    background: blue;
}
/* on screens 600px or smaller, we want the background of the element to change to red */
@media screen and (max-width: 600px) {  /* defining the query, here 'screen' is optional */
    .box {/* the element we want to change */
        background: red; /* listing JUST the properties we want to change, in this case, the background */
    }
} /* make sure everything is contained inside of the braces {} of the media query */

/* on screens 400px or smaller, we want the background of the element to change to purple */
@media screen and (max-width: 400px) {  
    .box {
        background: purple; 
    }
} /* make sure everything is contained inside of the braces {} of the media query */

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

That's it! Thanks for reading!

Edit
Pub: 10 Jun 2025 21:37 UTC
Edit: 12 Jun 2025 04:59 UTC
Views: 301