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.
<link rel="stylesheet" media="screen" href="sans-serif.css" />
<link rel="stylesheet" media="print" href="serif.css" />
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
<link rel = “stylesheet” media = “screen and (orientation: portrait) and (min-width: 320px) and (max-width: 480px)” href= “iphone-portrait.css” />
and (orientation: portrait)
and (min-device-width : 320px)
and (max-device-width: 480px)
/* type your style here */
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|
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.
- 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: 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