The @Media Rule


Screen size and resolution have expanded greatly over the years of the web. Screen sizes alone can range from a postage stamp to a walll. For this reason, we have the media query

Called a query for a reason. You are asking the browser a question or more specificly dictating how to render the objects on a device or media type based on it's characteristics. Device includeds the myriad of screen sizes as well as printers and speech devices.

You can determine media features with the media query like the resolution, min-width, orientation, etc.

CREATED 2021-11-11 09:07:58.0


UPDATED 2021-11-11 09:08:09.0


@media not|only <mediatype> and (<mediafeature> <and|or|not> <mediafeature>) {

CREATED 2021-11-11 09:27:58.0


UPDATED 2021-11-11 09:28:07.0

Media Types

There are only a few media types because there are only a few general catagories of media devices

  • all - as in all devices and it's the default.
  • print - for printers
  • screen for the myriad of screens available
  • speech - readers that read the text on the screen

CREATED 2021-11-11 09:34:52.0


UPDATED 2021-11-11 09:38:55.0

Media Features

any-hover Is there an input device that allows hovering?
any-pointer The acuracy of any pointer on the system
aspect-ratio Viewport ratio (width/height)
color Number of bits per color component
color-gamut Supported color ranges
color-index Number of colors
grid Bitmap or grid
height Height of the viewport
hover Does the pointer allow hovering?
inverted-colors Are colors being inverted
light-level Average light level
max-aspect-ratio Display max ration
max-color Max number of bits for color components
max-color-index Maximum number of colors
max-height Max height of the screen
max-monochrome Max number of bits for a monochrome device
max-resolution Max resolution in dpi or dpcm
max-width Max width of the screen
min-aspect-ratio Min ration (height/width)
min-color Min number of color bits
min-color-index Minimum number of displayable colors
min-height Minimum height of the display area
min-monochrome Minimum number of bits
min-resolution Minimum resolution in dpi or dpcm
min-width Minimum width of the display area
monochrome Number of bits - monochrome screen
orientation Orientation of the viewport
overflow-block How does the device handle overflow content along the block axis
overflow-inline Is overflow content scrollable?
pointer Accuracy of the pointer, if any (course, fine, none)
resolution Resolution in dpi or dpcm
scan Scanning process of the device
scripting Can the device interpret javascript
update How fast is the device
width Width of the viewport

CREATED 2021-11-11 09:38:57.0


UPDATED 2021-11-11 10:29:21.0



DBID: db.wam

Page Server: Ithica

©2012 Leistware Data Systems

      Hello anonymous