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.No | Value & Description |
|---|---|
| 1 | all Stylesheet applies to all media type devices |
| 2 | print Stylesheet applies to printers |
| 3 | screen Stylesheet applies to computer screens, tablets, smart-phones etc. |
| 4 | speech 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 −
<!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 −
<!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 −
