How to use different types of Media Features in CSS?

rajeshkumar — Mon, 16 Aug 2021 12:57:21 +0000

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)

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

grid Archives - scmGalaxy