Different media features and media types of responsive design

Media queries plays vital role in the responsive web design when the term Media Queries for responsive web design comes up, general thoughts moves around is “media = screen” or “media = print” which is generally used in the web development.

But there are other media type which can be used like aural, braille, embossed, handheld, projection, tv, tty future may includes more media type like 3d-glasses, while working on a responsive design generally media features used to test the dimension and orientation but there are many other features.

General media queries testing

Above media query is tested as:

Media testing Possible Result 1 Possible Result 2
Are you a screen ? Yes No
Is your screen in portrait mode? Yes No
Is your device screen minimum width is 320px Yes No
Is your screen device maximum width is 480px Yes No
iphone-portrait.css other-available-style.css

Different capabilities of media queries testing

Most media features can be prefixed with min- or max- to express “less than or equal to” or “greater than or equal to” constraint.

Dimension

  • width: The viewport width (width of the targeted display area of the output device)
  • height: The viewport height (height of the targeted display area of the output device)
  • device-width: Rendering surface width of the device.
  • device-height: Rendering surface height of the device.
  • aspect-ratio: Describe the aspect ratio of the output device. A 16:9 can be written as aspect-ratio: 16/9.
  • device-aspect-ratio: It is similar to aspect-ratio but for width and height of rendering surface rather than viewport.

Orientation

  • orientation: This capability tests for portrait or landscape orientation of the device.

Color and resolution

  • color: This checks the number of bits per color component of the output device min-color: 16 if the device is not a color device, the value is zero.
  • color-index: It indicates the number of entries in the color look-up table for the output device- min-color-index: 256
  • monochrome: This checks the number of bits per pixels in a monochrome frame. If the device is not monochrome, the value is zero.
  • Resolution: This checks the resolution of the output device. min-resolution: 300dpi

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

1 thought on “Different media features and media types of responsive design”

Leave a Reply

Your email address will not be published.