What is Media Query in CSS?
In CSS media query is defined using
@media
rule, and if a condition satisfies the
@media
expression then the style mentioned in the @media rule will execute for the document. For instance, the body background color of the document change if the browser screen size becomes less than 700px
@media only screen and (max-width: 700px) {
body {
background-color: lightgreen;
}
}
Mobile Design Layout
When you design a web-page layout always consider that your final product will also be used by mobile users. So, your first priority should be, designing a web-page for a mobile device. And this will increase the performance of your web page. In the grid-view tutorial, we create a responsive layout for a web-page using grids or columns. It was responsive but it would not look good on the small devices. by adding this code snippet we will make sure that it also fits in the small devices.
[class*="col-"]
{
width: 100%;
}
this
[class*="col-"]
syntax specifies that, select the elements which
class
attribute value start with
col-.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{box-sizing: border-box;}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
/*for desktop when the screen size is greater than 780px*/
@media only screen and (min-width: 780px)
{
.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%;}
}
header{ background-color: lightgreen;
height: 100px;
text-align: center;
padding: 20px;
}
#left_menu{
background-color: lightblue;
height: 400px;
text-align: center;
padding: 20px;
float: left;
}
#content{
background-color: red;
color:white;
height: 400px;
text-align: center;
padding: 20px;
float: left;
}
#right_menu{
background-color: lightblue;
height: 400px;
text-align: center;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<header class="col-12">
<h1>This header will occupy all the 12 columns</h1>
</header>
<section id="left_menu" class="col-2">This Section will occupy only two columns</section>
<article id="content" class="col-8">This article will occupy 8 Columns</article>
<section id="right_menu" class="col-2">This Section will occupy only two columns</section>
</body>
</html>
Breakpoint
A breakpoint is a condition when a different styling applied for the document when a media query gets executed. For instance, we can define styling for browser size less than 500px, and different styling for browser size greater than 600px. we can set various breakpoints for a document. here are some typical breakpoints for various devices.
/* For small devices which screen width is less than 500px */
@media only screen and (max-width: 500px) { CSS CODE}
/* For mobile and tablets which screen width is greater than 700px */
@media only screen and (min-width: 700px) {CSS Code}
/* Landscape tablets which screen width is greater than 800px */
@media only screen and (min-width: 800px) {CSS Code}
/* For laptops and desktop, which screen width is greater than 1200px */
@media only screen and (min-width: 1200px) {CSS Code}
Media Query with Different Orientation
Media query can also be performed on the base of display orientation we can set different styling for landscape orientation and different styling for portrait orientation.
Example
Change the background color to light green if the device orientation is landscape.
CSS
@media only screen and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
Hide the element using media query
With the help of
@media
query, we can also hide the element. In this example, we will hide the
<p>
content if the width size of the browser is less than 700px.
Example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
background-color: lightblue;
padding: 30px;
}
@media screen and (max-width: 700px) {
p {
display: none;
}
}
</style>
</head>
<body>
<p>Scale down the size of browser less than 700px and this paragraph will disappear</p>
</body>
</html>
Change the font size using media query
With the help of
@media
query, we can change the font size of a text, based on the screen size of the browser.
Example
Set the font size to 90px if the screen size is greater than 700px, else set the font size to 30px.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p{
padding: 30px;
}
@media screen and (max-width: 700px) {
p {
background-color: lightyellow;
font-size: 30px;
}
}
@media screen and (min-width: 700px) {
p {
background-color: lightgreen;
font-size: 80px;
}
}
</style>
</head>
<body>
<p>Scale down or up the page to see the changes</p>
</body>
</html>
Summary
- Media queries help us to define different styling for the same element based on the user device.
- A breakpoint is a media query condition.
- A web-page can have multiple breakpoints for multiple devices.
- Using the media query we can style any element.