The CSS Media Query can be used to make an HTML “div” responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular element for different sizes of screen.
Note: The CSS @media rule consists of a media type and it can have one or more expressions, which can result in values like “true” or “false”.
The following meta viewport element has to be included in the “head” section of the HTML file for the responsive web page.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
Syntax:
@media not|only mediatype and (expressions) {
// Your CSS codes
}
Approaches:
- First create a HTML structure with three div for creating box like structure and add heading with help of heading tag
- Now set a default font size for all elements and establish a base structure for the responsive divs with a fixed height and width.
- Organize three divs within a container div, each with a specific width, inline-block display, and distinct background colors.
- Implement a media query to adjust div widths to 70% when the screen width is 500px or less, ensuring responsiveness on smaller devices.
Example:
<!DOCTYPE html><html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
* {
font-size: 30px;
}
.mnb div {
margin: 10px;
height: 100px;
width: 200px;
}
.first {
width: 25%;
display: inline-block;
background-color: green;
}
.second {
width: 25%;
display: inline-block;
background-color: blue;
}
.third {
width: 25%;
display: inline-block;
background-color: yellow;
}
@media screen and (max-width: 500px) {
.first,
.second,
.third {
width: 70%;
}
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>Responsive div using css.</p>
<div class="mnb">
<div class="first">
<p>First block</p>
</div>
<div class="second">
<p>Second block</p>
</div>
<div class="third">
<p>Third block </p>
</div>
</div>
<p>
The media query will only apply
if the media type is screen
and the viewport is equal to
or less than 500px
</p>
</body>
</html>
|
Output:be
Similarly, one can add or change various styles for a particular HTML element for different screen sizes by adding CSS code in @media query section as shown in the above example.