Niq's OA Resources

Media Queries

Media Query

What is a media query

It's a set condition where the CSS contained in it is only applied under those conditions:

@media [conditions here] {
    .css{}
}

Screen Size (breakpoints)

We most often use them here at OA to have styles appear/disappear/change at certain screen sizes:

p{color: #0cc;} @media (max-width: 999.98px){p{color: #0cc;}}

This will be teal on smaller screens, and purple on bigger!

Max & min widths

The most common screen sizes you'll see (and the most browser compatible) is the max-width and min-width, to set styles to appear at 0px wide to a specified amount (max-width) and at specified amount and up (min-width)

@media (max-width: 767.98px){p{display: none;}} @media (min-width: 768px){p{display: none;}}

I am only visible at smaller than 768px

I am only visible at 768px and up

Combining conditions

You can use the keyphrase "and" to combine multiple conditions to be more specific with your media queries.

@media (max-width: 1000px) and (min-width: 768px){p.special1{color: #0f0;}}

I will only be green between 1000px and 768px

Bootstrap defaults

Bootstrap has breakpoints set at these screensizes, and their breakpoints are used in the sizes for the specific classes:

1200px (xl)

992px (lg)

768px (md)

576px (sm)

One trick that I picked up from these boostrap media queries is that, to avoid overlap, when we do "max-width" sizes, we make them -.02px less than the desired measurement. (so instead of 992px, we would make it a max-width of 991.98px)
This is so that the CSS wont over lap. (so at exactly 992px it wont get green and blue applied, etc)

Media range

This is the newer property that makes it a little easier to define CSS to happen at certain ranges. It eliminates the need for combining max and min widths, or doing the decimal values.

@media (992px <= width < 1200px){p{color: red;}}

This will be red between 992px and 1200px

You can define the width to <, = or <= to a value, or a value to be <, = or <= a width, or combiniation of both in one declaration!

@media (800px <= width){p{color: #0cc;}}

This will be teal at screens greater than or equal to 800px

@media (width <= 800px){p{color: #0cc;}}

This will be teal when screens are less than or equal to 800px

Other media specifics

You can have other conditions than screen size, you can have styles only apply to screens, landscape, print, etc!

These work with stylesheets too!

While this isn't something we really utelize, you can have external stylesheets apply under certain media constrains too.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">