CSS @media Rules
CSS @media Rules
@media rules can be used to apply part of a style sheet based on the result of one or more media queries.
Applying max-width media query
In the following example, we will apply part of a style sheet when the width of the output screen is less than 630px.
Default value for CSS @media property is all.
The following are the list of media types available in CSS.
|all||Used for all media type devices. Default Value||Run|
|Used for printers.||Run|
|screen||Used for computer screens, tablets, smart-phones etc.||Run|
The following are the list of media features available in CSS.
|any-hover||Does any available input mechanism allow the user to hover over elements?||Run|
|any-pointer||Is any available input mechanism a pointing device, and if so, how accurate is it?||Run|
|aspect-ratio||Width-to-height aspect ratio of the viewport.||Run|
|color||Number of bits per color component for the output device.||Run|
|color-gamut||Approximate range of colors that are supported by the user agent and output device.||Run|
|color-index||Number of entries in the output device's color lookup table, or zero if the device does not use such a table.||Run|
|display-mode||Specifies the display mode of the application.||Run|
|grid||Does the device use a grid or bitmap screen?||Run|
|height||Height of the viewport.||Run|
|hover||Does the primary input mechanism allow the user to hover over elements?||Run|
|inverted-colors||Is the user agent or underlying OS inverting colors?||Run|
|light-level||Light level of the environment.||Run|
|monochrome||The number of bits per "color" on a monochrome (greyscale) device.||Run|
|orientation||Orientation of the viewport.||Run|
|overflow-block||How does the output device handle content that overflows the viewport along the block axis.||Run|
|overflow-inline||Can content that overflows the viewport along the inline axis be scrolled.||Run|
|pointer||Is the primary input mechanism a pointing device, and if so, how accurate is it?||Run|
|prefers-color-scheme||Detect if the user prefers a light or dark color scheme|
|prefers-reduced-motion||The user prefers less motion on the page|
|resolution||Pixel density of the output device.||Run|
|scan||Scanning process of the output device.||Run|
|update||How quickly can the output device modify the appearance of the content.||Run|
|width||Width of the viewport.||Run|
In the following example, we will demonstrate how to set the CSS
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
This channel is primarily useful for Full Stack Web Developer.