YouTip

# CSS3 @media Query: A Comprehensive Guide The `@media` rule, introduced in CSS3, allows you to apply different styles to different media types and devices. It is the cornerstone of modern responsive web design (RWD), enabling web pages to adapt seamlessly to various screen sizes, resolutions, and device orientations. --- ## Introduction to @media Queries With `@media` queries, you can tailor your website's layout and appearance to match the specific characteristics of the device rendering it. When a user resizes their browser window, the browser dynamically evaluates the media queries and re-renders the page using the styles that match the new viewport dimensions. ### Basic Example The following CSS rule changes the page's background color to light blue if the viewport width is $300\text{px}$ or less: ```css @media screen and (max-width: 300px) { body { background-color: lightblue; } } ``` --- ## Browser Support The numbers in the table below indicate the first browser version that fully supports the `@media` rule: | Rule | Chrome | Internet Explorer | Firefox | Safari | Opera | | :--- | :---: | :---: | :---: | :---: | :---: | | **@media** | 21 | 9 | 3.5 | 4.0 | 9 | --- ## CSS Syntax ```css @media not|only mediatype and (mediafeature and|or|not mediafeature) { /* CSS rules to apply when the query is true */ } ``` You can build complex media queries using logical operators: `not`, `and`, `only`, and `,` (comma). ### Logical Operators * **`and`**: Combines multiple media features or combines media types with media features. The entire query must be true for the styles to apply. * **`not`**: Negates a media query. It returns true if the specified query is false, and vice versa. If used, you must also explicitly specify a media type. * **`only`**: Prevents older browsers that do not support media queries with media features from applying the styles. For example, without `only`, an older browser might interpret `screen and (max-width: 500px)` simply as `screen` and apply the styles to all screens. If used, you must also specify a media type. * **`,` (Comma)**: Acts as a logical `OR` operator. It combines multiple media queries into a single rule. If any of the queries in the comma-separated list are true, the styles will be applied. ### Linking External Stylesheets with Media Queries You can also load entirely different stylesheet files depending on the media query evaluation: ```html ``` --- ## Media Types Media types describe the general category of a device. The media type is optional (defaults to `all` if omitted) unless you use the `not` or `only` operators. | Value | Description | | :--- | :--- | | **all** | Used for all media type devices. | | **print** | Used for printers and print previews. | | **screen** | Used for computer screens, tablets, smartphones, etc. | | **speech** | Used for screen readers and speech synthesizers. | | *aural* | **Deprecated.** Used for speech synthesizers. | | *braille* | **Deprecated.** Used for braille tactile feedback devices. | | *embossed* | **Deprecated.** Used for braille printers. | | *handheld* | **Deprecated.** Used for handheld devices (typically small screen, limited bandwidth). | | *projection* | **Deprecated.** Used for projected presentations. | | *tty* | **Deprecated.** Used for media using a fixed-pitch character grid (like teletypes). | | *tv* | **Deprecated.** Used for television-type devices. | --- ## Media Features Media features test specific characteristics of the user agent, output device, or environment. | Feature | Description | | :--- | :--- | | **aspect-ratio** | The ratio of the viewport's width to its height. | | **color** | The number of bits per color component of the output device (0 if monochrome). | | **color-index** | The number of entries in the color lookup table of the device. | | **device-aspect-ratio** | **Deprecated.** The ratio of the physical device screen's width to its height. | | **device-height** | **Deprecated.** The physical height of the device's screen. | | **device-width** | **Deprecated.** The physical width of the device's screen. | | **grid** | Queries whether the output device uses a grid or bitmap screen. | | **height** | The height of the rendering surface (viewport height). | | **max-aspect-ratio** | The maximum ratio of viewport width to height. | | **max-color** | The maximum number of bits per color component. | | **max-color-index** | The maximum number of entries in the device's color lookup table. | | **max-device-aspect-ratio**| **Deprecated.** The maximum ratio of physical screen width to height. | | **max-device-height** | **Deprecated.** The maximum physical height of the device's screen. | | **max-device-width** | **Deprecated.** The maximum physical width of the device's screen. | | **max-height** | The maximum height of the viewport. | | **max-monochrome** | The maximum number of bits per pixel in a monochrome frame buffer. | | **max-resolution** | The maximum resolution of the device. | | **max-width** | The maximum width of the viewport. | | **min-aspect-ratio** | The minimum ratio of viewport width to height. | | **min-color** | The minimum number of bits per color component. | | **min-color-index** | The minimum number of entries in the device's color lookup table. | | **min-device-aspect-ratio**| **Deprecated.** The minimum ratio of physical screen width to height. | | **min-device-width** | **Deprecated.** The minimum physical width of the device's screen. | | **min-device-height** | **Deprecated.** The minimum physical height of the device's screen. | | **min-height** | The minimum height of the viewport. | | **min-monochrome** | The minimum number of bits per pixel in a monochrome frame buffer. | | **min-resolution** | The minimum resolution of the device. | | **min-width** | The minimum width of the viewport. | | **monochrome** | The number of bits per pixel in a monochrome frame buffer (0 if not monochrome). | | **orientation** | The orientation of the viewport (`portrait` or `landscape`). | | **resolution** | The pixel density of the output device (e.g., `96dpi`, `300dpi`, `118dpcm`). | | **scan** | The scanning process of the output device (e.g., `progressive` or `interlace` for TVs). | | **width** | The width of the rendering surface (viewport width). | --- ## Practical Examples ### Responsive Grid Layout This example demonstrates how to stack grid columns vertically on mobile devices (screens with a width of $500\text{px}$ or less) by resetting their widths to $100\%$: ```css /* Default styles for larger screens */ .gridmenu, .gridmain, .gridright { float: left; padding: 15px; } .gridmenu { width: 20%; } .gridmain { width: 60%; } .gridright { width: 20%; } /* Responsive override for mobile devices */ @media only screen and (max-width: 500px) { .gridmenu, .gridmain, .gridright { width: 100%; } } ``` ### Orientation-Based Styling You can apply styles specifically when a user rotates their tablet or smartphone: ```css @media screen and (orientation: landscape) { body { background-color: #f3f3f3; } .sidebar { display: block; } } ``` --- ## Best Practices & Considerations 1. **Mobile-First vs. Desktop-First**: * **Mobile-First** uses `min-width` media queries to add complexity as the screen size increases. This is highly recommended for modern performance optimization. * **Desktop-First** uses `max-width` media queries to scale down and simplify layouts for smaller screens. 2. **Viewport Meta Tag**: Always include the viewport meta tag in your HTML `` to ensure media queries scale correctly on mobile devices: ```html ``` 3. **Avoid Deprecated Features**: Avoid using `device-width` and `device-height` as they refer to the physical screen size rather than the browser viewport. Use `width` and `height` instead.