CSS @media Rule

Example

@media screen{
body {
  color: red;
  font-size: 30px;
  }
}

@media print {
body {
  color: green;
  font-size: 50pt;
  }
}

@media (max-width: 500px) {
body {
  background: red;
  color: white;
  }
}

Meaning

The @media rule can be used to define style rules for multiple media types in a single embedded style sheet.

Standard Syntax

@media media-query-list {
  CSS stylesheet
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Possible Operators

Value	Description
and	AND operator
not	NOT operator
,	OR Operator

Divices

Value	Description
all	(Default) Suitable for all devices
aural	Deprecated. Speech synthesizers
braille	Deprecated. Braille feedback devices
handheld	Deprecated. Handheld devices (like small screen, limited bandwidth etc…)
projection	Deprecated. Projectors
print	Print preview pages.
screen	Screen of the devices
speech	Screen for screenreaders to reads the page.
tty	Deprecated. Teletypes and similar media using a fixed-pitch character grid
tv	Deprecated. Television devices

Attribute Values

Value	Description	Example
width	Specifies the width of the screen should targeted.min- and max- prefixes can be used.	media="screen and (min-width:320px)
height	Specifies the height of the screen should targeted.min- and max- prefixes can be used.	media="screen and (max-height:640px)
device-width	Deprecated. Specifies the width of the device screen should targeted.min- and max- prefixes can be used.	media="screen and (device-width:600px)"
device-height	Deprecated. Specifies the height of the device screen should targeted.min- and max- prefixes can be used.	media="screen and (device-height:600px)"
orientation	Specifies the orientation of the device value can be landscape or portrait	media="all and (orientation: portrait)"
aspect-ratio	Specifies the width/height of the screen should targeted.min- and max- prefixes can be used.	media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Deprecated. Specifies the device-width/device-height ratio of the screen should targeted.min- and max- prefixes can be used.	media="screen and (aspect-ratio:16/9)"
color	Specifies the bits per color of navigated page should be display.	media="screen and (color:4)"
color-index	Specifies the number of colors the navigated display can handle. min- and max- prefixes can be used.	media="screen and (min-color-index:256)"
monochrome	The bits per pixel in a monochrome frame buffer. min- and max- prefixes can be used.	media="screen and (monochrome:3)"
resolution	the pixel density (dpi or dpcm) of the navigated display. min- and max- prefixes can be used.	media="print and (resolution:200dpi)"
scan	Scanning method of a tv display. Values Can be "progressive" and "interlace".	media="tv and (scan:interlace)"
grid	the output device is grid or bitmap. Value can be "1" for grid, and "0" otherwise.	media="handheld and (grid:1)"

More Examples

Example

@media screen{
body {
  color: red;
  font-size: 30px;
  }
}
@media print {
body {
  color: green;
  font-size: 100px;
  }
}

Example

@media (max-width: 400px){
body {
  color: red;
  font-size: 50px;
  }
}

@media (min-width: 400px){
body {
  color: green;
  font-size: 100px;
  }
}
@media (min-width: 500px){
body {
  color: blue;
  font-size: 150px;
  }
}

Example

body {
  color: black;
  font-size: 16px;
}
  
@media (min-width: 300px) and (max-width: 500px) {
body {
  color: red;
  font-size: 50px;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
body {
  color: green;
  font-size: 100px;
  }
}

❮ Previous Reference Next ❯