Mediaqueries 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.
Markdown for AI
A clean, structured version of this page for AI assistants and LLMs.
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy.
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:
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.