Låt oss titta på den faktiska användningen av all @media-funktionalitet.

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

<media_type>

Det vanligaste värdet för medietypen är screen, eftersom vi generellt skapar webbsidor för enheter med skärmar. Låt oss se hur det används:

@media screen and (min-width: 768px) {
  .container {
    background-color: purple;
  }
}

Med hjälp av denna regel anger vi för webbläsaren att om användarens enhet har en skärm och dess bredd är 768px eller mer, så ska elementet med klassnamnet container ha egenskapen background-color med värdet purple.

Vi specificerar skärmbredden för vilken vi vill ange vissa css-regler. Följande exempel illustrerar detta:

/* 1st example */
@media screen and (max-width: 1200px) {
  .container {
    color: aliceblue;
  }
}

/* 2nd example */
@media screen and (min-width: 1680px) {
  .container {
    color: gainsboro;
  }
}

I det första exemplet anger vi för webbläsaren att för alla enheter med en skärmbredd mindre än eller lika med 1200px, ska egenskapen color med värdet aliceblue tillämpas på elementet med klassnamnet container.

I det andra exemplet informerar vi webbläsaren att om skärmbredden på en enhet överstiger eller är lika med 1680px, ska egenskapen color med värdet gainsboro tillämpas på elementet med klassnamnet container.

Operatorer är valfria och anges mellan media-typ och media-funktion. and informerar webbläsaren att alla angivna funktioner måste uppfyllas.

@media screen and (min-width: 380px) and (max-width: 840px) {
  .link {
    text-decoration: overline;
  }
}

Denna regel anger för webbläsaren att elementet med klassnamnet link ska ha egenskapen text-decoration med värdet overline endast om användaren har en enhet med en skärm OCH skärmbredden är lika med eller större än 380px OCH skärmbredden är lika med eller mindre än 840px.

Genom att använda operatorn , kan vi ange en grupp uttryck där om något av dem uppfylls, kommer en media query att aktiveras.

@media screen and (min-width: 960px), (max-width: 540px) {
  .link {
    text-decoration: overline;
  }
}

Med hjälp av denna regel har vi informerat webbläsaren att elementet med klassnamnet link ska ha egenskapen text-decoration med värdet overline om användarens skärmbredd är större än eller lika med 960px ELLER om skärmbredden är mindre än eller lika med 540px.