Role of MEDIA QUERY in CSS3 for Responsive

CSS media queries:

A media query consists of a media type and at least one expression that limits the style sheet’s scope by using media features, such as width, height, and color. Media queries added in CSS 3.

Syntax:

Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

Media Types:

Some CSS properties are only designed for a certain media. For example the “voice-family” property is designed for aural user agents. Some other properties can be used for different media types. For example, the “font-size” property can be used for both screen and print media, but perhaps with different values.

Media Type:Description

all:Used for all media type devices.
aural:Used for speech and sound synthesizers.
braille:Used for braille tactile feedback devices.
embossed:Used for paged braille printers.
handheld:Used for small or handheld devices.
print:Used for printers.
projection:Used for projected presentations, like slides.
screen:Used for computer screens.
tty:Used for media using a fixed-pitch character grid, like teletypes and terminals.
tv:Used for television-type devices

Eg:
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}

or
<link href=”styles.css” type=”text/css” media=”screen” rel=”stylesheet”/>
<link href=”styles.css” type=”text/css” media=”print” rel=”stylesheet”/>

No comments yet.

Leave a comment