What is Media Query?
- Media query is used to make the webpage to capable of the device.
- Mainly it is used to make responsive web designs.
- With media queries, we can set the different styles on the different screen sizes.
This will be our boilerplate:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Media Query in CSS </title>
<style>
</style>
</head>
<body>
</body>
</html>
Media Query Syntax
@media screen and (min-width: 600px) and (max-width: 900px){
cssSelector {
/* CSS Properties */
}
}
- In the given syntax example we have set the min-width and max-width to add style on the given screen size.
- cssSelector is used to select the HTML element and we will write our CSS properties in { }
Media Query Screen Sizes
i) Phone: 600px
ii) Tablet: 768px
iii) Laptop: 992px
iv) Large: 1200px
Using Media Query Properties
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Media Query in CSS </title>
<style>
* {
margin: 0;
padding: rem;
}
.mediaContainer {
width: 100%;
height: 100vh;
color: black;
text-align: center;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
background-color: orange;
}
@media screen and (max-width: 600px) {
.mediaContainer {
width: 100%;
color: white;
background-color: red;
}
}
@media screen and (max-width: 768px) {
.mediaContainer {
width: 100%;
color: black;
background-color: yellow;
}
}
@media screen and (max-width: 992px) {
.mediaContainer {
width: 100%;
color: white;
background-color: green;
}
}
@media screen and (min-width: 1200px) {
.mediaContainer {
width: 100%;
color: black;
background-color: orange;
}
}
</style>
</head>
<body>
<div class="mediaContainer">
Media Query Example by Geeks Help
</div>
</body>
</html>
Output:
Write this code in your Code Editor and See the output on the browser window.
