Media Query CSS For All Devices With Example
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Pragati
In this article we will show you the solution of media query CSS for all devices with example, 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.
Step By Step Guide On Media Query CSS For All Devices With Example :-
The example below shows the media query CSS for all devices.
<!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> media query css for all devices with example </title>
<style>
h1 {
font-size: larger;
font-weight: bolder;
color: lightgreen;
}
.box{
color: blue;
background-color: bisque;
text-align: center;
justify-content: center;
font-size: 40px;
display: none;
}
/* for iPhone */
@media ( max-width : 350px) {
#iphone{
display: block;
}
}
/* for tablet */
@media ( max-width : 720px) and ( min-width : 350px) {
#tablet{
display: block;
color: aliceblue;
background-color: blueviolet;
font-weight: bolder;
}
}
/* for laptop computer*/
@media ( max-width : 950px) and ( min-width : 720px) {
#laptop{
display: block;
color: white;
background-color: blue;
font-weight: bolder;
}
}
/* for desktop computer*/
@media ( min-width : 950px) {
#desktop{
display: block;
color: red;
background-color: pink;
font-weight: bolder;
}
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> media query css for all devices with example </p>
<div class="box" id="iphone">for iphone</div>
<div class="box" id="tablet">for tablet</div>
<div class="box" id="laptop">for laptop computer</div>
<div class="box" id="desktop">for desktop computer</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 four <div> with class “box” and a unique id for iPhone, tablet, laptop, and desktop computers.
- Add <style> tag into <head> tag to add CSS to the HTML page.
- We add style to all <div> by selecting the class “box”
- To add a media query we add @media and add max-width and min-width into it.
- Now addressing the id of iPhone, tablet, laptop, and desktop computers, we added media queries. we also added different CSS to each id.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to give media query CSS for all devices.
I hope this article on media query CSS for all devices with example helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
