Media queries in CSS3 are used to adjust the design of a website or web application for different devices with varying screen sizes, orientations, and resolutions.
Here is a basic example of how to use media queries in CSS3:
```
/* Style applied for standard devices like laptops, desktops etc. */
body {
background-color: lightgreen;
}
/* CSS media query within a stylesheet /
/ This will apply if max-width is upto 600px (e.g., for mobile devices and smaller screens) */
@media only screen and(max-width: 600px) {
body {
background-color: lightblue;
}
}
```
In this example, if you access the page using a larger screen with a width above 600px, the body color will be light green. If you access it via a smaller screen like a mobile device with a screen width of 600px or less, the body color will turn light blue.
Various properties can be used in media queries:
- `max-width` or `min-width`: These are used to apply styles for devices with widths greater than or less than a specified width.
- `max-height` or `min-height`: These properties apply styles for devices with viewport heights greater than or less than a specified value.
- `orientation`: This is used for applying styles based on whether the device is in “landscape” or “portrait” mode.
- `resolution`: Styles can be applied based on the device’s resolution or pixel ratio.
You can also include multiple conditions in a single media query:
```
@media only screen and (min-width: 600px) and (max-width: 1200px) {
body {
background-color: orange;
}
}
```
In this example, the `body` background color will be `orange` on screens with a width of 600px to 1200px.
