ikeoha

Honestly, it's just about min-width and max-width

min-width

The CSS rules are applied if a screen is greater or equal to the specified size. E.g: Given the CSS style rule

 @media (min-width: 360px) {
    div#okay {
        border: 1px solid blue;
    }
 }

The above style will only be applied to #okay if the screen is greater or equal to 360px. So visually it can be seen as

0px <---------------|360px|---------------->
       Not applied              Applied

max-width

The CSS rules are applied when a screen is at lesser or equal to the specified size. E.g: Given the CSS style rule

@media (max-width: 360px) {
    div#okay {
        border: 1px solid blue;
    }
}

The above style will only be applied until the screen the reaches the specified width. This can be visually represented as:

0px <---------------|360px|---------------->
       Applied                Not Applied

Description for the non-technical

min-width: Don't add the style rule until the screen is at least the specified size.

max-width: Add the style rule until the screen size reaches the specified width.

Application during development

min-width is used when doing mobile-first styling while max-width is used for `desktop-first**.

To further explain this take the following style rules:

p {
  color: blue;
}

@media (min-width: 360px) {
  p {
    color: red;
  }
}

This can be visually represented as:

0px <---------------|360px|---------------->
color: blue           color: red

This would be considered a mobile-first approach because the default style of the p tag is only applied when the screen is small and changes once the increases in size towards a large(desktop) screen.

Now alternatively consider this style rule:

p {
    color: blue;
}

@media (max-width: 360px) {
    p {
        color: red;
    }
}