All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Media Query CSS For All Devices

Last Updated : Mar 11, 2024

Media Query CSS For All Devices

In this tutorial we will show you the solution of media query css for all devices and we will understand about media query using CSS which help us to create responsive web pages.

Responsive web pages are web pages which helps to create a user-friendly web page, it means the required or say specified components of web pages changes according to width and height of viewport, screen, orientation and resolutions also.

It means that webpage makes it self-responsive with help of media query.

Step By Step Guide On Media Query CSS For All Devices :-

Now, as we understand use of media query. Here, below we are going to see how to use media query. So, let us see the below example for better understanding.

<!DOCTYPE html>
<html>
<head>
   <title> Media Query CSS for all devices </title>
 <style>
  body {
  background-color: red;
}
@media only screen and (max-width: 800px) {
  body {
    background-color: black;
  }
}
@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}
@media only screen and (max-width: 400px) {
  body {
    background-color: yellow;
  }
}
@media only screen and (max-width: 200px) {
  body {
    background-color: green;
  }
}
 </style>
</head>
<body>
<h1>
 Talker’s code – CSS tutorials
</h1>
<h2>
 Media Query CSS for all devices
</h2>
<p>
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>
</body>
</html>
  1. As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Here, as we see that when the width of device changes the background color the body also changes. As, result with help of this media query of webpage become responsive according to size of screen. There are many others ways with help of which we can apply media query, we will understand about them in our next session.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we are able to understand media query CSS for all devices.

I hope this tutorial on media query css for all devices helps you and the steps and method mentioned above are easy to follow and implement.