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 grid scan overflow-block overflow-inline prefers-color-scheme prefers-reduced-data prefers-reduced-motion prefers-reduced-transparency prefers-contrast device-posture nav-controls video-color-gamut video-dynamic-range
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 horizontal-viewport-segments vertical-viewport-segments
Vendor-specific CSS 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