The purpose of this article is to change the background-color on a specific wider viewport in CSS. In simple words specify some width and if the width satisfies the condition then it does not change its view but if the with not satisfy the condition then it is going to change its view.
Media rule: This rule is used in media queries to apply different styles for different media types/devices.
Syntax :
@media not|only mediatype and (mediafeature) {
Some CSS-Code;
}Where:
- not – This keyword inverts the meaning of an entire media query.
- only – This keyword prevents older browsers that do not support media queries with media features from applying the specified styles.
- and – This keyword combines a media feature with a media type or other media features.
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html><html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
body {
background-color: lightgreen;
font-size: 30px;
}
@media only screen and (max-width: 800px) {
body {
background-color: lightgrey;
}
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<p>
Resize the browser window. When
the width of this document is
800 pixels or less, the
background-color is "lightgrey",
otherwise it is "lightgreen".
</p>
</body>
</html>
|
Output –