The @media rule in CSS is a powerful feature used to apply different styles for different media types and devices. It's a cornerstone of responsive web design, allowing developers to tailor the presentation of content to a wide range of devices such as desktops, laptops, tablets, and mobile phones.

Basic Syntax and Usage

The @media rule can be used within a CSS file to define styles that will only be applied if certain conditions—defined by media queries—are met. The basic syntax is as follows:

The mediatype can be all, print, screen, or speech, and is optional; if omitted, all is assumed. The mediafeature might include things like min-width, max-width, orientation, or resolution.

Here's a simple example that changes the background color of the body element based on the width of the viewport:

Advanced Concepts