CSS - Using media query features

Media Query features define the style for specific characteristics of a given user agent, output device, or environment.

Media features can be either range or discrete.

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media print and (orientation: portrait) {
  colod: red;
}

Many range features can be prefixed with min- or max- to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1000px:

@media (max-width: 1000px) {
  colod: blue;
}

An alternative syntax for above condition is to use ordinary mathematical comparison operators >, <, >=, or <=.

@media (width <= 1000px) {
  colod: blue;
}

@media (width <= 1000px) is the equivalent of @media (max-width: 1000px).

These are some other commonly used media features:

• orientation: Orientation of the viewport (landscape or portrait)
• max-height: Maximum height of the viewport
• min-height: Minimum height of the viewport
• height: Height of the viewport (including scrollbar)
• max-width: Maximum width of the viewport
• min-width: Minimum width of the viewport
• width: Width of the viewport (including scrollbar)

Related Post(s):

• CSS - Using media queries

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