![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS @media Rule
![CSS @media Rule](https://codetofun.com/wp-content/themes/codetofun/images/large/css-media-rule.webp)
Photo Credit to CodeToFun
🙋 Introduction
The @media
rule in CSS is a powerful feature that allows you to apply styles based on the characteristics of the device or viewport displaying the content.
This is essential for creating responsive designs that adapt to various screen sizes and device types, ensuring a seamless user experience across different devices.
💡 Syntax
The syntax for the @media
rule involves specifying a media query that defines the conditions under which the enclosed styles will be applied.
@media media-type and (condition) {
/* CSS rules here */
}
Here, media-type is optional and specifies the type of media (like screen, print, etc.), and condition represents the feature and value you want to query (like width, height, etc.).
🎛️ Default Value
The @media
rule does not have a default value, as it functions based on conditions you specify. If no media queries are applied, the default styles will be used.
🏠 Property Values
Value | Description |
---|---|
media-type | Defines the type of media (e.g., screen, print, all). This is optional. |
condition | A media feature and value pair, such as max-width: 600px or orientation: landscape. |
📄 Example
Example 1: Basic Usage
In this example, we'll apply different styles based on the viewport width. If the viewport width is 600px or less, the text color will change to red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @media Rule Example</title>
<style>
body {
color: black;
}
@media (max-width: 600px) {
body {
color: red;
}
}
</style>
</head>
<body>
<h1>Responsive Text Color</h1>
<p>This text color changes based on viewport width.</p>
</body>
</html>
Example 2: Applying Styles for Print
In this example, we'll use a media query to apply specific styles when printing the page. The background color will change to white when printing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @media Rule Example</title>
<style>
body {
background-color: lightgray;
}
@media print {
body {
background-color: white;
}
}
</style>
</head>
<body>
<h1>Print Style Example</h1>
<p>This background color changes for printing.</p>
</body>
</html>
Example 3: Landscape Orientation
In this example, we'll apply styles based on the orientation of the device. If the device is in landscape mode, the text color will change to blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @media Rule Example</title>
<style>
body {
color: black;
}
@media (orientation: landscape) {
body {
color: blue;
}
}
</style>
</head>
<body>
<h1>Orientation-Based Text Color</h1>
<p>This text color changes based on device orientation.</p>
</body>
</html>
🖥️ Browser Compatibility
The @media
rule is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a fundamental part of CSS used for responsive design, so you can rely on its compatibility for creating adaptable web pages.
🎉 Conclusion
The @media
rule is a crucial tool in responsive web design, allowing you to create styles that adapt to different screen sizes, orientations, and media types.
By leveraging media queries, you can ensure that your website provides an optimal user experience across various devices and conditions. Experiment with different media queries to see how they can enhance the responsiveness and usability of your web projects.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee