In this article we will show you the solution of CSS media queries min and (max), the Cascading style sheet or CSS is used to add style to the HTML.
The CSS media queries are used to create a Responsive Web Design, which means adjusting the viewport with respect to the device type like- mobile, tablet, computer, etc.
We use the @media tag to add media queries with min-width and max-width.
Step By Step Guide On CSS Media Queries Min And (Max) :-
In the example below, we will see min-width, max-width, and both min and max width with media queries.
<!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> CSS media queries min and max </title>
<style>
h1 {
font-size: larger;
font-weight: bolder;
color: lightgreen;
}
.container{
color: blue;
background-color: bisque;
text-align: center;
justify-content: center;
font-size: 40px;
display: none;
}
/* for min-width */
@media only screen and ( min-width : 350px) {
#no1 {
display: block;
color : red ;
background-color: lightpink;
}
}
/* for max-width */
@media only screen and ( max-width : 950px) {
#no2 {
display: block;
color: green;
background-color: antiquewhite;
}
}
/* for min-width and max-width */
@media only screen and ( max-width : 720px) and ( min-width : 350px) {
#no3 {
display: block;
color: brown;
background-color: burlywood;
}
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> CSS media queries min and max </p>
<div class="container" id="no1"> min width </div>
<div class="container" id="no2"> max width </div>
<div class="container" id="no3"> min and max width </div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create three <div> with class “container” and a unique id by the no of <div>
- Add <style> tag into <head> tag to add CSS to the HTML page.
- We add style to all <div> by selecting the class “container”
- To add min-width in media query we add “@media only screen and (min-width)”. If the viewport is less than the min-width, the display will be none.
- To add max-width in media query we add “ @media only screen and (max-width)”. If the viewport is more than the max-width, the display will be none.
- To add both min-width and max-width in the media query we add “ @media only screen and (min-width) and (max-width)” . If the viewport is less than the min-width and more than the max-width, the display will be none.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give CSS media queries min and max.
I hope this article on CSS media queries min and (max) helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
