CSS - Using media queries

Media queries allow you to conditionally apply CSS styles depending on a device's media type (such as screen, print). You can also specifiy other features or characteristics such as screen resolution or orientation etc.

A media query is composed of an optional media type and any number of media feature expressions, which may be combined using logical operators.

Media types describe the general category of a given device, mainly we are using three basic types screen, print, and all.

• screen: used for websites commonly designed (for computer screens, tablets, smart-phones etc).

  @media screen {
    colod: red;
  }
  

• print: used for printing (print preview mode)

  @media print {
    colod: blue;
  }
  

• all: for all devies, there is no filter for any specific device category.

  @media all {
    colod: green;
  }
  

The mediatype is optional (if omitted, it will be set to all).

@media {
  colod: green;
}

You can also target multiple devices types. For instance, this @media rule uses two media queries to target both screen and print devices:

@media screen, print {
  colod: green;
}

Related Post(s):

• CSS - Using media query features