CSS @media Rule


 Using Media Queries, the @media CSS at-rule is used to apply a different set of styles for different media/devices. A Media Query is primarily used to check the device's height, width, resolution, and orientation (Portrait/Landscape). This CSS rule is a way to get more out of responsive design by delivering a more optimized design for a specific screen type or device, such as a smartphone or PC. The media queries can also be used to specify specific styles only for printed documents or screen readers.

Syntax

Example

Preview

Property Values

Value Description
all Default. Used for all types of media devices.
print Printers use it.
screen Used for computer screens, tablets, and smartphones, among other things.
speech Screen readers that "read" the page aloud are examples of this.
any-hover Is it possible to hover over elements using any of the available input mechanisms?
any-pointer Is there a pointing device available, and if so, how accurate is it?
aspect-ratio The proportion of the viewport's width to height
color The output device's bit rate per color component.
color-gamut The approximate color gamut supported by the user agent and output device.
color-index The maximum number of colors that the device can display
grid Regardless of whether the device is a grid or a bitmap.
height The height of the viewport
hover Is it possible for the user to hover over elements using the primary input mechanism? 
inverted-colors Is the browser or the underlying operating system inverting colours? 
light-level The current level of ambient light.
max-aspect-ratio The greatest possible ratio between the width and height of the display area
max-color The output device's maximum number of bits per colour component.
max-color-index The maximum number of colours that the device is capable of displaying.
max-height The maximum display area height, such as a browser window
max-monochrome On a monochrome (greyscale) device, the maximum number of bits per "color"
max-resolution The device's maximum resolution, expressed in dpi or dpcm.
max-width The greatest possible width of a display area, such as a browser window
min-aspect-ratio The smallest possible ratio between the width and height of the display area
min-color The output device's minimum bit count per color component.
min-color-index The device's maximum number of colours that can be displayed.
min-height The display area's minimum height, such as a browser window
min-monochrome The number of bits required for each "colour" on a monochrome (greyscale) device.
min-resolution The device's minimum resolution, expressed in dpi or dpcm.
min-width The smallest possible width of a display area, such as a browser window
monochrome On a monochrome (greyscale) device, the number of bits per "colour."
orientation The viewport's orientation (landscape or portrait mode)
overflow-block How does the output device handle content that exceeds the viewport's width along the block axis?
overflow-inline Can content that exceeds the viewport's capacity along the inline axis be scrolled?
pointer Is the primary input mechanism a pointing device, and how precise is it? 
resolution The output device's resolution, expressed in dpi or dpcm.
scan The output device's scanning process
scripting Is scripting (for example, JavaScript) supported? 
update How quickly can the output device change the look of the content? 
width The width of the viewport

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
@media 21.0 3.5 4.0 9.0 9.0