Media queries are CSS rules that apply different styles based on the screen size, device type, or other conditions. They allow you to create responsive layouts by adjusting styles for different viewport widths.

Example:
/* Default styles for all screens */
body {
font-size: 16px;
background-color: #f0f0f0;
color: #333;
}

/* CSS for small screens */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
/* You can add more styles for small screens as needed */
}

/* CSS for medium screens */
@media screen and (min-width: 769px) and (max-width: 1024px) {
body {
font-size: 18px;
}
h1 {
font-size: 36px;
}
/* You can add more styles for medium screens as needed */
}

/* CSS for large screens */
@media screen and (min-width: 1025px) {
body {
font-size: 20px;
}
h1 {
font-size: 48px;
}
/* You can add more styles for large screens as needed */
}