CSS media queries are used to apply different styles to a web page based on various characteristics of the
user's device or viewport. They allow you to create responsive designs that adapt to different screen sizes,
device types, and orientations. The primary purpose of CSS media queries is to enhance the user experience
and ensure that your website looks and functions well across a wide range of devices.
Here are some common purposes and use cases for CSS media queries:
- Responsive Web Design
- Adaptive Layouts
- Optimizing for Different Devices
- Orientation Changes
- Print Stylesheets
- High-Resolution Displays
- Accessibility
- Performance Optimization
Example:
<html>
<head>
<style>
/* Default styles for all screens */
body {
font-size: 16px;
background-color: #f0f0f0;
color: #333;
}
/* CSS for screens with a maximum width of 768px (small screens) */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* CSS for screens with a width between 769px and 1024px (medium screens) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
body {
font-size: 18px;
}
}
/* CSS for screens with a minimum width of 1025px (large screens) */
@media screen and (min-width: 1025px) {
body {
font-size: 20px;
}
}
</style>
</head>
<body>
<p>This is some text.</p>
</body>
</html>
Output:
This is some text.
