Media query is used to create responsive web design. It means that the view of web page differ from system to system based on screen or media types.
screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width. The screen size is differ from screen to screen.
Syntax:
@media screen and (max-width: width)
Example: This example use media query which works when the maximum width of display area is 400px. It is specifying screen as opposed to the other available media types the most common other one being print.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Media query */
@media screen and (max-width: 400px) {
body {
background-color: green;
color:white;
}
}
</style>
</head>
<body>
<h1>The @media Rule</h1>
<p>
Resize the browser window. When the width of
this document is 400 pixels or less, the
background-color is "green", otherwise it
is "lightblue".
</p>
</body>
</html>
|
Output:
Screen size greater then 400px:
Screen size less then 400px:
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles.
Syntax:
@media only screen and (max-width: width)
Example 2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Media query */
@media only screen and (max-width: 400px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<h1>The @media Rule</h1>
<p>
Resize the browser window. When the width of
this document is 400 pixels or less, the
background-color is "green", otherwise it
is "lightblue".
</p>
</body>
</html>
|
Output:
Screen size greater then 400px:
Screen size less then 400px:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Mar, 2019
Like Article
Save Article