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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?