CSS Media Queries
CSS media queries are a key part of responsive web design. They enable web pages to change according to different screen sizes, resolutions, and device capabilities.
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Media Queries
</title>
</head>
<body>
<h1>
CSS Media Queries
</h1>
<p> Resize the browser window to see the effect! </p>
</body>
</html>
CSS
body
{
background-color: #234edd;
}
@media screen and
(min-width: 480px)
{
body
{
background-color: aqua;
}
}
Output