Understanding CSS Media Types and Queries

CSSWeb DevelopmentFront End Technology

CSS Media Types and Queries help the user to define certain styles in accordance with a device’s general type (screen, print, etc.) or its characteristics (screen resolution, viewport dimensions, etc.)

Syntax

Following is the syntax for media queries −

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

Here, media query is applied if −

  • mediatype matches the device type on which document is rendered.
  • not/only operators are not defined then media query applies to all mediatypes.
  • not/only operators are specified then media query is not/only applied to certain mediatype respectively.

A user can have different stylesheets each corresponding to a different media. For example, a user can have a different stylesheet for print and screen media.

<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">

and,

<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">

Following are the media types listed in CSS3 −

Sr.NoValue & Description
1all
Stylesheet applies to all media type devices
2print
Stylesheet applies to printers
3screen
Stylesheet applies to computer screens, tablets, smart-phones etc.
4speech
Stylesheet applies to screen readers that "reads" the page out loud

Following are the methods to create media dependent stylesheets −

  • Using @media At-rules
  • Using @import At-rules
  • Using HTML <link> element with media attribute

Example

Let’s see an example for CSS media query −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
}
.col {
   float: left;
   width: 20%;
   padding: 40px;
}
body {
   background-color: lemonchiffon;
   margin: 20px;
}
@media screen and (max-width: 850px) {
   .col {
      width: 50%;
   }
   body {
      background-color: mediumseagreen;
   }
}
@media screen and (max-width: 550px) {
   .col {
      width: 100%;
   }
   body {
      background-color: powderblue;
   }
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div></body></html>

Output

This will produce the following output −

When screen size is above 850px −

When screen size is between 550px and 850px −

When screen size is below 550px −

Example

Let’s see another example for CSS media query: HTML Document −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>
CSS document (screen.css):
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}

CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }

Output

This will produce the following output −

When document is visible in a screen mediatype −

When document is visible in a print mediatype −

raja
Published on 07-Jan-2020 11:32:18
Advertisements