Media Queries for screens, printers, TV, and handheld devices were first introduced in CSS2 using the @media rule that defined different style rules for different media types. However, other than the print media type, they did not garnished much support.
CSS3 extended CSS2 media queries types but instead of detecting a device type, they detect the device capability. They are currently supported by all major browsers. Media queries can be used to detect:
Media queries are used to create responsive design for web sites and apps by serving up different style sheets for desktops, tablets and smart phones (iOS and Android).
A media query syntax consists of a media type with one or more expressions that will resolve to true or false.
@media not|only mediatype and (expressions) {
CSS rules goes here...;
}
The media query result is true, if:
When the media query is true, the appropiate style rules are rendered.
NOTE: Unless the not or only operators is used, the media type is optional and the media type all is implied.
Below is a list of Media Queries Types:
Media Query are typically designed where the COMMON style rules that applied to all devices are placed outside of the media queries rules and then separated media queries are created for different breakpoints (device width)
The following example changes the header's background color, padding, and height if the viewport is 480 pixels or smaller:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example 1</title>
<style>
header {
height: 40px;
background-color: black;
color: white;
font-family: Arial;
font-weight: bold;
font-size: 24px;
padding: 20px
}
/* ---------------- MEDIA QUERIES ----------------- */
@media screen and (min-width: 480px) {
header {
background-color: blue;
font-size: 36px;
height: 50px;
}
}
</style>
</head>
<body>
<header>Logo Goes Here...</header>
</body>
</html>
The following example extends Example 1 to add a title, menu, and main text area:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example 1</title>
<style>
body {font-family: Arial;}
header {
height: 40px;
background-color: black;
color: white;
font-family: Arial;
font-weight: bold;
font-size: 24px;
padding: 20px
}
.container {overflow: auto; margin-top: 20px;}
#main_body {margin-left: 5px;}
#menu_list {margin: 0; padding: 0;}
.menu_item {
background: blue;
border-radius: 5px;
list-style-type: none;
margin: 3px;
padding: 5px;
color: white;
font-weight: bold;}
/* ---------------- MEDIA QUERIES ----------------- */
@media screen and (min-width: 480px) {
header {
background-color: blue;
font-size: 36px;
height: 50px;
}
#sidebar {width: 200px;float: left;}
/* main_body margin-left property is 16 px larger than to sidebar width (200px)
to prevent the text in the main_body from wrapping below the sidebar */
#main_body {margin-left: 216px;}
}
</style>
</head>
<body>
<header>Logo Goes Here...</header>
<div class="container">
<div id="sidebar">
<ul id="menu_list">
<li class="menu_item">Home</li>
<li class="menu_item">Products</li>
<li class="menu_item">Services</li>
<li class="menu_item">Contact Us</li>
</ul>
</div>
<div id="main_body">
<h1>Page Title Goes Here...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident quam obcaecati
cumque, adipisci explicabo. Deleniti necessitatibus quibusdam excepturi et veniam neque,
commodi deserunt aut veritatis, nulla, ut magnam praesentium. Lorem ipsum dolor sit amet,
consectetur adipisicing elit.</p>
</div>
</div>
</body>
</html>
The following example extends Example 2 to add e-mail addresses with email icons.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example 1</title>
<style>
body {
font-family: Arial;
}
header {
height: 40px;
background-color: black;
color: white;
font-family: Arial;
font-weight: bold;
font-size: 24px;
padding: 20px;
}
.container {
overflow: auto;
margin-top: 20px;
}
#main_body {
margin-left: 5px;
}
#menu_list {
margin: 0;
padding: 0;
}
.menu_item {
background: blue;
border-radius: 5px;
list-style-type: none;
margin: 3px;
padding: 5px;
color: white;
font-weight: bold;
}
/* Example 3: Expand Email Addresses with icons */
ul {list-style-type: none;}
ul li a {
text-decoration: none;
display: block;
padding-left: 20px;
background: url(email_icon.gif) left center no-repeat;}
ul li a:after {content: none;}
/* ---------------- MEDIA QUERIES ----------------- */
@media screen and (min-width: 480px) {
header {
background-color: blue;
font-size: 36px;
height: 50px;
}
#sidebar {
width: 200px;
float: left;
}
#main_body {
margin-left: 216px;
/* main_body margin-left property is 16 px larger than to sidebar
width (200px) to prevent the text in the main_body from wrapping below the sidebar */
}
ul li a:after {content: " (" attr(href) ")"; font-style: italic;}
}
</style>
</head>
<body>
<header>Logo Goes Here...</header>
<div class="container">
<div id="sidebar">
<ul id="menu_list">
<li class="menu_item">Home</li>
<li class="menu_item">Products</li>
<li class="menu_item">Services</li>
<li class="menu_item">Contact Us</li>
</ul>
</div>
<div id="main_body">
<h1>Page Title Goes Here...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident quam obcaecati
cumque, adipisci explicabo. Deleniti necessitatibus quibusdam excepturi et veniam neque,
commodi deserunt aut veritatis, nulla, ut magnam praesentium. Lorem ipsum dolor sit amet,
consectetur adipisicing elit.</p>
<ul>
<li><a href="mailto:CorneliusChopine@rmcs.com">Cornelius Chopin</a></li>
<li><a href="mailto:CarolJones@rmcs.com">Carol Jones </a></li>
<li><a href="mailto:BobWhite@rmcs.com">Bob White</a></li>
</ul>
</div>
</div>
</body>
</html>