What are media queries, and how can they be used to create responsive designs?

Question

Aryan Kumar · Answer

Media queries are a feature of CSS that allow you to apply different styles to a page based on the size and characteristics of the device or viewport that the page is being viewed on. They are commonly used to create responsive designs that adapt to different screen sizes and devices.

Media queries work by applying different sets of CSS rules based on the media features specified in the query. For example, you might use a media query to apply different styles to a page when it is viewed on a small screen like a smartphone or on a larger screen like a desktop computer.

Here's an example of a media query that changes the background color of a page when the screen width is less than 768 pixels:

@media (max-width: 768px) {
 body {
   background-color: lightblue;
 }
}

In this example, we're using the @media rule to create a media query. The (max-width: 768px) part of the query specifies the condition under which the styles inside the curly braces will be applied - in this case, when the maximum width of the viewport is 768 pixels or less.

Inside the curly braces, we're specifying a new background color for the body element using the background-color property.

By using media queries, you can create different layouts, font sizes, margins, padding, and other styles to suit different devices and screen sizes. This allows you to create responsive designs that work well on a wide range of devices, from smartphones and tablets to desktop computers and large-screen TVs.

forum

What are media queries, and how can they be used to create responsive designs?

Can you answer this question?

1 Answers