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
/*or*/
@media screen
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 |
| 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
Leave a Reply