What is Media Query ?
CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen).
- The media query technique first used in CSS3.
- It became a W3C recommendation in June 2012.
- It is an extension of media dependent stylesheets used in different media types (i.e. screen and print) found in CSS2.
- The most commonly used media feature is "width".
- uses the @media rule to include a block of CSS properties only if a certain condition is true.
uses the @media rule to include a block of CSS properties only if a certain condition is true.
The term Responsive Web Design was given by Ethan Marcotte. It facilitates you to use fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts i.e. Desktop, Smartphone, Tablet etc.
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<style>
body {
background-color:yellow;
}
@media only screen and (max-width: 500px)
{
body
{
background-color:green;
}
} </style>
</head>
<body>
<p>If you resize the browser window and the width of this document is less than 500 pixels, the background-color is "green", otherwise it is "yellow" </p> </body>
</html>
Output
If you resize the browser window and the width of this document is less than 500 pixels, the background-color is "green", otherwise it is "lavender"
How to add a breakpoint?
Media query can be used to create a responsive webpage. The breakpoint is used on web pages where you want that certain parts of the design will behave differently on each side of the breakpoint.
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"]
{
float: left;
padding: 15px;
}
html
{
font-family: "Lucida Sans", sans-serif;
}
.header
{
background-color: purple;
color: pink;
padding: 15px;
}
.menu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li
{
padding: 8px;
margin-bottom: 7px;
background-color :green;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover
{
background-color: #0099cc;
}
.aside
{
background-color: green;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer
{
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"]
{
width: 100%;
}
@media only screen and (min-width: 600px)
{
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
} @media only screen and (min-width: 768px)
{
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>C/C++</li>
<li>Java</li>
<li>SQL</li>
<li>Android</li>
<li>HTML</li>
<li>CSS</li>
<li>Cloud Computing</li>
<li>PHP</li>
<li>JSON</li>
<li>JQuery</li>
<li>MongoDB</li>
<li>Oracle</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>Media-Query</h1>
<p>CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen).</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>Media-Query</h2>
<p>CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen)</p>
<h2>Media-Query</h2>
<p>CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen) </p>
<h2>Media-Query</h2>
<p>CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to conditions such as screen resolution (e.g. Smartphone screen vs. computer screen)</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>