Media Query For Mobile And Tablet
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Ashish
In this tutorial we will show you the solution of media query for mobile and tablet, in our previous tutorials, we talk about media query of all standard devices, in this article we are going to understand only mobile and tablet queries using CSS.
There are many ways with help of which we can show you how to use media queries for mobile and laptops, but we try to keep this short as possible.
Step By Step Guide On Media Query For Mobile And Tablet :-
Now, media queries can be applied in many ways such as we will show you examples having landscape and portrait media different, and many other things which we have to notice, but we found an example below with help of which we can understand media queries easily.
<!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 query for mobile and tablet </title>
<style>
* media queries for smartphones, both for landscapes and portraits */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* use styles here */
}
/* media query for smartphone landscape only*/
@media only screen
and (min-width : 321px) {
/* use styles here */
}
/* media query for smartphone portrait only*/
@media only screen
and (max-width : 320px) {
/* use styles here */
}
/* media query for iPad portrait and landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* use styles here */
}
/* media query for iPad landscape only*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* use styles here */
}
/* media query for iPad portrait only*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* use styles here */
}
/* media query for iPhone 4 - 5s here */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* use styles here */
}
/* media query for iPhone 6 here */
@media
only screen and (max-device-width: 667px)
only screen and (-webkit-device-pixel-ratio: 2) {
/* use styles here */
}
/* media query for iPhone 6+ here*/
@media
only screen and (min-device-width : 414px)
only screen and (-webkit-device-pixel-ratio: 3) {
/* use styles here */
}
/* media query for Samsung galaxy S7 edge */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
/* use styles here */
}
</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.
- 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, we have seen many examples like for iPhones, iPads, simple Smartphones and also for Samsung Galaxy’s. You can use above media queries to use in codes. As we know the sizes of screens does not change. Hence, above queries can help you to understand different media queries.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand media queries for mobile and tablet.
I hope this tutorial on media query for mobile and tablet helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
