CSS media queries are used to apply different styles based on various characteristics of the device or viewport. Media queries allow you to create responsive designs that adapt to different screen sizes, orientations, resolutions, and more.
Here are a few examples of commonly used CSS media queries:
- Targeting specific screen widths:
/* Styles applied when the viewport width is 600 pixels or less */
@media (max-width: 600px) {
/* CSS rules here */
}
/* Styles applied when the viewport width is 768 pixels or more */
@media (min-width: 768px) {
/* CSS rules here */
}
- Targeting specific device orientations:
/* Styles applied when the viewport is in landscape orientation */
@media (orientation: landscape) {
/* CSS rules here */
}
/* Styles applied when the viewport is in portrait orientation */
@media (orientation: portrait) {
/* CSS rules here */
}
- Targeting high-resolution displays (e.g., Retina displays):
/* Styles applied when the device has a high pixel density */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* CSS rules here */
}
- Combining multiple conditions:
/* Styles applied when the viewport width is between 600px and 1024px, and the orientation is landscape */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS rules here */
}
These examples demonstrate different media query conditions that can be used to target specific device characteristics. Media queries allow you to adjust the layout, typography, or any other CSS properties based on the conditions specified, providing a flexible and responsive design for various devices and screen sizes.
It’s important to note that these examples are just a starting point, and you can customize the media queries based on your specific needs and design requirements.