Media-Query

Media-query

Media type:-

A media type can be declared in the head of an HTML document using the "media" attribute inside of a <link> element.

name Description
all ussed for all device
print used to printer
screen used to screen
speech used to screenreaders

Media features:-

Feature Description
color number of bits per color component
grid true for a grid-based device
hover Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
min-monochrome The minimum number of bits per "color" on a monochrome device
color-index The number of colors the device can display
height height of the rendering surface
device-height Height of the rendering surface of the output device
device-width width of the output device
min-height The minimum height of the display area
max-height The maximum height of the display are
min-width he minimum width of the display area
resolution Pixel density of the output device
overflow-inline Can content that overflows the viewport along the inline axis be scrolled(Added in Media Queries Level 4.)
overflow-block How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
scan Scanning process of the output device
width width of the rendering surface
update How quickly can the output device modify the appearance of the content(Added in Media Queries Level 4.)
pointer How frequently the output device can modify the appearance of content(Added in Media Queries Level 4.)

MORE EXAMPLES

Screen

the element become hide when thw browse size become less then or grater then 600px;

@media screen and (max-width: 600px)
hover

the hover element is primary input mechanism can test whether the user's primary input mechanism can hover over elements.

@media (hover: hover)
Color

The color feature is specified value that represents the number of bits per color component (red, green, blue) of the output device.

@media (color) { p { color: red; }
Grid

The grid feature is used to test whether the output device is grid-based screen or not.

:not(.apple) { color: lightgray; } @media (grid: 0) { .apple { color: red; }
Height

The height is used to apply styles based on the height of the viewport

@media (height: 360px) { div { color: red; } }

Minimum height

@media (min-height: 20rem) { div { background: red; } }

maximum height

@media (max-height: 30rem) { div { border: px solid green; } }
Scan

it use to test scanning process

@media (scan: interlace) { p { font-family: sans-serif; } }
Pointer

he pointer media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.

input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 10px; height: 25px; border-width: 2px; border-color: red; } }
Width

It is use to test the width of the viewpor

@media (width: 360px) { div { color: red; } }
Update

It is use to test how frequently (if at all) the output device

@media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } }