Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Media Query

Media Query is used to apply styles to a web page depending on the screen sizes of different devices like smartphones, tablets, and PCs, to display the optimal layout and design.


Basic Structure​

Media Query begins with @media followed by the conditions.

The styles for the matching condition are enclosed within curly braces { }.


Example:​

CSS
/* Styles for screens less than 600px wide */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* Set the background color to light blue */
  }
}

In this example, when the screen width is less than 600px, the background color of the body is set to lightblue.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.