Media Queries Device types

Media Queries are at the heart of responsive designs. Media queries have been around for a long time and are widely supported by most of the browsers. In this article we will showcase the features listed out into charts. Even before developing responsive

Media Queries are at the heart of responsive designs. Media queries have been around for a long time and are widely supported by most of the browsers. In this article we will showcase the features listed out into charts. Even before developing responsive designs we need to get to know how to work with media device types.

Media Device types:

The first step in defining media queries is deciding where to to place these rules. There are two ways. The first,   externally as a rule to load the file or not. The second, as an internal means to modify and tweak the output of the design. The first group of rules filter out based on the type of medium that is going to be used. The most common type is the screen and that captures all digital displays out there. Here is the list of media types and their meaning:

allIs the same and no media marked. It means that all devices adhere to the rules in this area.
screenFor CSS rules that control displays of any type.
printTo define CSS rules that are specific to print.
handheldSmall devices that you can hold in your hand.
tvInternet enabled TVs
projectionUsed for projected presentations, like slides
brailleFor braille devices.
embossedFor braille printers
auralUsed for speech and sound synthesizersThe type ‘aural’ is now deprecated.
speechReserved but not used as of yet. Intended for speech related CSS.
ttyIntended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).

CSS Media Query Connectors:

Media queries can be connected. For example you might what a rule only to happen if its a screen and handheld (a more common match would be between a type and a value such as handheld and width of 600 pixels. Here is the list of directives available to work with media queries :

andto match a few rules together:
(this) and (that)
notmust be added as the first thing in the CSS media rule and it negates the rule.
onlydoes nothing but is used to hide the rule from older browsers that don’t support media types.

 

References and further reading:

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz