Examples of CSS Media Queries

Hello! If you want your website to work well on all devices and screen sizes, you definitely need to use one of the interesting CSS features known as media queries. Media queries give us the ability to design CSS styles for different devices and various display conditions. Now let's take a look at a few simple examples to see how this capability can be utilized.

Media queries are very important for creating responsive and adaptive designs. The days have gone when we only designed for desktop computers. Now, with the existence of smart phones, tablets, and various displays, we have to ensure that our designs look good on all these devices.

Now, assume you want a design that, when the page becomes small (for example, when a user is browsing the site on a mobile), takes on a different color and style. By using media queries, you can easily make this happen. In the examples we have here, we can see how changing colors and styles can be managed using media queries.

One more use of media queries is that they can hide some parts of the site that are not needed on smaller screens. For example, maybe you want an image or a sidebar that on smaller screens doesn’t get displayed, simply hide it.

So if we want to summarize, media queries allow us to create adaptable designs that better respond to user needs and experiences.

@media screen and (max-width: 600px) {\r\n  body {\r\n    background-color: lightblue;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 601px) and (max-width: 1200px) {\r\n  body {\r\n    background-color: lightgreen;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 1201px) {\r\n  body {\r\n    background-color: coral;\r\n  }\r\n}\r\n

Explanation of Line by Line Code