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.
1 2 |
<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
1 2 3 4 5 6 7 8 9 10 11 |
<link rel = “stylesheet” media = “screen and (orientation: portrait) and (min-width: 320px) and (max-width: 480px)” href= “iphone-portrait.css” /> /*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
1 thought on “Different media features and media types of responsive design”