CSS Media Queries

CSS Media Queries provide a way for web developers to optimize the display of their web pages for different devices and screen sizes, checking screen properties using CSS without relying on JavaScript.

This is a demo of Media Queries implemented entirely in CSS. It does so by brute-force testing ranges and substituting all possible values from a very large CSS file. Below, you can see real-time values that correspond to the current state of your web browser.

CSS Media Queries

@media-type
display-mode
orientation
color
color-index
color-gamut
dynamic-range
monochrome
forced-colors
inverted-colors
light-level
grid
scan
overflow-block
overflow-inline
prefers-color-scheme
prefers-reduced-data
prefers-reduced-motion
prefers-reduced-transparency
prefers-contrast
device-posture
 
min-width (px)
min-height (px)
min-device-width (px)
min-device-height (px)
min-device-width (cm)
min-device-height (cm)
min-device-width (in)
min-device-height (in)
min-resolution (dpi)
min-resolution (dppx)
min-resolution (dpcm)
max-aspect-ratio
device-aspect-ratio
pointer
any-pointer
hover
any-hover
scripting
update
environment-blending
screen-spanning

Vendor-specific Media Queries

-moz-device-orientation
-moz-os-version
-moz-windows-theme
-moz-windows-default-theme
-moz-windows-classic
-moz-windows-glass
-moz-windows-compositor
-moz-mac-lion-theme
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-images-in-menus
-moz-images-in-buttons
-moz-menubar-drag
 
-moz-touch-enabled
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
-moz-is-resource-document
min--moz-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-transform-3d
-webkit-transform-2d
-webkit-transition
-webkit-animation

Further Reading

Leave a Comment (6)