In this tutorial we will show you the solution of media query css for mobile, in our previous tutorials, we see how to use media query and use of media query for different screens.
In this article, we will talk about media query for mobile device. Let us see the example below for better understanding.
Step By Step Guide On Media Query CSS For Mobile :-
Now, as we know there are many types of mobiles having different dimensions, resolutions, height, width and screen sizes. So, how to use media for them.
Is there need to create different queries for different devices or only one media query code is applicable to done this.
So, let see the below example to find solutions of this example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title> Media CSS query for mobile</title>
<style>
* {
margin: 0;
padding: 0;
}
.media_query {
display: flex;
justify-content: center;
align-items: center;
margin: 40px auto;
padding: 30px;
font-size: 30px;
width: 400px;
height: 400px;
background-color: black;
color: white;
}
@media screen and (min-width: 1024px) {
.media_query {
background-color: blue;
color: white;
}
}
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
.media_query {
width: 500px;
height:500px;
background-color: red;
color: black;
}
}
@media screen and (max-device-width: 640px) {
.media_query {
width: 400px;
height: 400px;
background-color: acqa;
color: green;
}
}
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.media_query {
width: 400px;
height: 400px;
background-color: honeydew;
color: red;
}
}
/* For Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
.gfg-div {
width: 200px;
height: 200px;
background-color: hotpink;
color: #fff;
}
}
/* For Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
.gfg-div {
width: 400px;
height: 200px;
background-color: cyan;
color: black;
}
}
@media screen and (max-device-width: 640px) {
.gfg-div {
width: 400px;
height: 200px;
background-color:cornsilk ;
color: black;
}
}
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: crimson;
color: black;
}
}
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: maganta;
color: black;
}
}
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
width: 400px;
height: 400px;
background-color: cyan;
color: black;
}
}
</style>
</head>
<body>
<div class ="media_query">
<p>
Talkers code – media CSS query for mobile
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>
</div>
</body>
</html>- As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
- Let us understand the above codes step by step.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As, above we see that we use media query for different devices by using different screen sizes, etc. Here, in this article we add some additional queries for more mobile devices also. One more thing, in this tutorial, we different use orientations in this article.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand media CSS query for mobile.
I hope this tutorial on media query css for mobile helps you and the steps and method mentioned are easy to follow and implement.
About Ashish
