MENU


Media Query

Used on <link>, <style> and<source>, a media-query specifies what devices the resource is optimized for. It assumes the following format:
              [ not | only ] device [and ([min-|max-]vname:value)]
which can be repeated any number of times, separated by commas.

'device' can be: 

all: all devices
print: printer
screen: computer screens
speech: speech synthesizers
'vname' can be: 
[any-]hover: hovering allowed?
[any-]pointer: a pointing device?
aspect-ratio: width-to-height ratio
color: number of bits per color component
color-gamut
color-index: no.of entries in the color lookup table
display-mode
forced-colors: restricts color palette
grid: 0 / 1; grid or bitmap screen?
height
inverted-colors: inverting colors?
light-level
monochrome: bits/pixel;0 if not monochrome
orientation: portrait / lanscape
overflow-block
overflow-inline: scrollable?
prefers-color-scheme: light or dark?
prefers-contrast: adjusts contrasts?
prefers-reduced-motion
prefers-reduced-transparency
resolution: pixel density
scan: progressive / interlace
scripting: JavaScript available?
update: modification frequency of appearance
width

This loads a CSS file within … only if the media condition is true. Here, the comma functions as the logical operator OR.

<link media="screen and (10em <= width <= 500px) and (orientation: portrait), print and (resolution:300dpi), not screen and (monochrome:2), speech and (aspect-ratio: 11/5)" rel="stylesheet" type="text/css" href="mystyle.css">