CSS Properties

Media Query

A media query consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.

Syntax:

@media not|only mediatype and (expressions/ media features) { CSS; }

Example:

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

• all - Used for all media type devices
• print - Used for printers
• screen - Used for computer screens, tablets, smart-phones etc.
• speech - Used for screenreaders that "reads" the page out loud

If you use the not or only operators, you must specify an explicit media type.

• And
  - @media (min-width: 800px) { CSS }
  - @media (min-width: 800px) and (orientation: landscape) { CSS }
  - @media screen and (min-width: 800px) and (orientation: landscape) { CSS }
• Or (Comma , )
  - @media (min-width: 800px), (orientation: landscape) { CSS }
• Not
  - @media not all and (min-width: 800px) { CSS }
  - @media not (all and (min-width: 800px)) { CSS }
  - @media (not all) and (min-width: 800px) { CSS }
  - @media not screen and (color), print and (color) { CSS }
  - @media (not (screen and (color))), print and (color) { CSS }

Media Features

• any-hover - Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
• any-pointer - Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
• aspect-ratio - The ratio between the width and the height of the viewport
• color - The number of bits per color component for the output device
• color-index - The number of colors the device can display
• grid - Whether the device is a grid or bitmap
• height - The viewport height
• hover - Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
• inverted-colors - Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
• light-level - Current ambient light level (added in Media Queries Level 4)
• max-aspect-ratio - The maximum ratio between the width and the height of the display area
• max-color - The maximum number of bits per color component for the output device
• max-color-index - The maximum number of colors the device can display
• max-device-aspect-ratio - The maximum ratio between the width and the height of the device
• max-device-height - The maximum height of the device, such as a computer screen
• max-device-width - The maximum width of the device, such as a computer screen
• max-height - The
• max-monochrome - The maximum number of bits per "color" on a monochrome (greyscale) device
• max-resolution - The maximum resolution of the device, using dpi or dpcmmaximum height of the display area, such as a browser window
• scan - The scanning process of the output device
• scripting - Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
• max-width - The maximum width of the display area, such as a browser window
• min-aspect-ratio - The minimum ratio between the width and the height of the display area
• min-color - The minimum number of bits per color component for the output device
• min-color-index - The minimum number of colors the device can display
• min-device-aspect-ratio - The minimum ratio between the width and the height of the device
• min-device-width - The minimum width of the device, such as a computer screen
• min-device-height - The minimum height of the device, such as a computer screen
• min-height - The minimum height of the display area, such as a browser window
• min-monochrome - The minimum number of bits per "color" on a monochrome (greyscale) device
• min-resolution - The minimum resolution of the device, using dpi or dpcm
• min-width - The minimum width of the display area, such as a browser window
• monochrome - The number of bits per "color" on a monochrome (greyscale) device
• update-frequency - How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
• width - The viewport width
• orientation - The orientation of the viewport (landscape or portrait mode)
• overflow-block - How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
• overflow-inline - Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
• pointer - Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
• resolution - The resolution of the output device, using dpi or dpcm