CSS2 Introduced Media Types

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.
Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduces Media Queries

Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Property
@media	21.0	9.0	3.5	4.0	9.0

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {
CSS-Code;}

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Unless you use the not or only operators, the media type is optional and the all type will be implied.
You can also have different stylesheets for different media:

CSS3 Media Types

Value	Description
all	Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.
The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
   }}

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}}

CSS3 Media Queries - Examples

CSS3 Media Queries - More Examples

Let us look at some more examples of using media queries.
We will start with a list of names which function as email links. The HTML is:

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;}</style>
</head>
<body>

<ul>
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

Notice the data-email attribute. In HTML5, we can use attributes prefixed with data- to store information. We will use the data- attribute later.

Width from 520 to 699px - Apply an email icon to each link

When the browser's width is between 520 and 699px, we will apply an email icon to each email link:

Example 2

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
   }}

Width from 700 to 1000px - Preface the links with a text

When the browser's width is between from 700 to 1000px, we will preface each email link with the text "Email: ":

Example 3

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
   }}

Width above 1001px - Apply email address to links

When the browser's width is above 1001px, we will append the email address to the links.
We will use the value of the data- attribute to add the email address after the person's name:

Example 4

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
   }}

Width above 1151px - Add icon as we used before

For browser widths above 1151px, we will again add the icon as we used before.
Here, we do not have to write an additional media query block, we can just append an additional media query to our already existing one using a comma (this will behave like an OR operator):

Example 5

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
   }}

label name

PHP

CSS3 Media Queries

ttest

RRelted