Explain in detail Media Queries with an example.

Welcome back.

and 5 others joined a min ago.

5.6kviews

written 8.3 years ago by

teamques10 ★ 68k

• modified 2.8 years ago

advanced internet technology

ADD COMMENT EDIT

2 Answers

8views

written 8.3 years ago by

teamques10 ★ 68k

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Example:

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

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}
@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;
    }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<ul>
  <li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>
</body>
</html>
Output:

enter image description here

ADD COMMENT EDIT

5views

written 6.8 years ago by

teamques10 ★ 68k

Media queries in CSS3

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.
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.
The following example changes the background-color to lightblue if the viewport is 500 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

< !DOCTYPE html>

< html>

< head> <meta name="viewport" content="width=device-width, initial-scale=1.0">

< style>
   body 
      {
           background-color: lightgreen; 
       }
@media only screen and (max-width: 500px)

{ body {

    background-color: lightblue;
    }
}

< /style>

< /head>

< /html>

ADD COMMENT EDIT

Community

Content

Company