Media queries are used in CSS to conditionally apply styles based on the size and characteristics of a device’s screen. They allow you to create responsive designs that can adapt to different screen sizes and resolutions, providing an optimal viewing experience for users on different devices.
Here’s an example of how to target desktop, tablet, and mobile using media queries:
/* Desktop styles */
@media (min-width: 1024px) {
/* Add styles for desktop here */
}/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
/* Add styles for tablet here */
}
/* Mobile styles */
@media (max-width: 767px) {
/* Add styles for mobile here */
}
In this example, we use the @media directive to define three separate media queries, each with its own set of styles.
The first media query targets desktop screens by using a min-width of 1024 pixels. This means that the styles inside this media query will only be applied to screens that are 1024 pixels or wider.
The second media query targets tablet screens by using a min-width of 768 pixels and a max-width of 1023 pixels. This means that the styles inside this media query will only be applied to screens that are between 768 and 1023 pixels wide.
The third media query targets mobile screens by using a max-width of 767 pixels. This means that the styles inside this media query will only be applied to screens that are 767 pixels or narrower.
It’s important to note that these values are just examples and may not match the specific screen sizes of all devices. It’s a good idea to test your designs on a variety of devices to determine the best values to use for your media queries.