UX Design and Development course

Example queries

The following are some examples that illustrate some use cases when writing queries using the various operators.

All the code represented here, you can play with on SassMeister Note All the examples are writing using Sass, well because CSS kind of sucks o_O

min operator

When using the min operator, this is considered 'mobile-first' as you are stating that your rules will apply until the device reaches a larger breakpoint. As shown in the following example, the code states that the background-color will go green when the viewport is 'larger' then 900px.

@media (min-width: 900px) {
  .block {
    background-color: green;
  }
}

max operator

When using the max operator, this is considered 'desktop-first' as you are stating that your rules will apply when the device reaches a smaller breakpoint. As shown in the following example, the code states that the background-color will go green when the viewport is 'smaller' then 900px.

@media (max-width: 900px) {
  .block {
    background-color: green;
  }
}

and operator

The and operator is interesting as you can set up situations where every query needs to be meet in order for the breakpoint's rules to be applied. In the following example I am targeting widths that are larger then 600px AND less then 900px.

That's weird? Ok, so in this example, when the viewport is 601px - 899px, the background-color will be red versus the green set in the breakpoint.

@media (min-width: 600px) and (max-width: 900px) {
  .block {
    background-color: green;
  }
}

or operator

The or operator is interesting as you can set up situations where either one query is matched or another. In the following example I am targeting widths that are either larger then 800px OR less then 600px.

@media (min-width: 800px), (max-width: 600px) {
  .block {
    background-color: green;
  }
}

not operator

The not operator is reversed logic and takes some thinking. In the following example, I am targeting widths that are NOT less then 800px. So, when the viewport is larger then 800px apply the rules.

Reverse logic makes sense to me never ... see what I did there?

@media not all and (max-width: 800px) {
  .block {
    background-color: green;
  }
}