Media queries

A media query defines a set of devices and their characteristics. In Sitefinity CMS, you can choose from a list of the most popular devices which have predefined rules, such as screen resolution, orientation, and so on. You can use these predefined media queries as templates that you can edit or simply create a new media query from scratch.

For example, a media query CSS for devices with high PPI and resolution, such as the iPhone 5, looks similar to this:

For each new or predefined media query that you create or edit, there are a variety of properties to define, such as:

• The size of the device display or the size of the browser in which the page is displayed.
• The screen or browser orientation as an additional condition to apply the responsive design rule and styles.
  A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width, the window is in portrait mode. If the width is larger than the height, the orientation is in landscape mode.
• The aspect ratio of the value of the height and width.
• The resolution DPI.
• Monochrome media feature describes the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value is 0.
  

  NOTE: Only 0 and 1 are valid values (this includes -0). Thus, everything else creates a malformed media query.

• Grid media feature is used to query whether the output device is grid or bitmap. If the output device is grid-based (for example, a tty terminal, or a phone display with only one fixed font), the value is 1. Otherwise, the value is 0.
  

  NOTE: Only 0 and 1 are valid values (this includes -0). Thus, everything else creates a malformed media query.

• The media query CSS itself – all media query options are explained in the official w3c site.