@media CSS At-Rule

Description

The CSS @media at-rule is used to apply different styles to a website depending on the device or media type that the website is being displayed on. This allows you to create responsive websites that look good and function well on all devices, from large desktop monitors to small smartphones.

To use the @media at-rule, you first need to define a media query. A media query is a condition that checks the characteristics of the device or media type that the website is being displayed on. For example, you could define a media query that checks the screen width of the device, or the type of browser that is being used.

Syntax

@media <media-types> {
  /* media-specific styles */
}

Values

• allSuitable for all devices.
• brailleIntended for braille tactile feedback devices.
• embossedIntended for paged braille printers.
• handheldIntended for handheld devices (typically small screen, limited bandwidth).
• printIntended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
• projectionIntended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
• screenIntended primarily for color computer screens.
• speechIntended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
• ttyIntended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
• tvIntended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Example

@media (max-width: 600px) {

  body {

    font-size: 16px;

  }

}

Browser Support

The following table will show you the current browser support for the at-rule @media.

Desktop
12	1	1	9.2	3

Tablets / Mobile
18	4	10.1	1	1	37

Last updated by CSSPortal on: 30th September 2023