CSS @media Rules
CSS @media Rules
CSS @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.
Example
Syntax
Using CSS
Using Javascript
Default Value
Default value for CSS @media property is all.
Media Types
The following are the list of media types available in CSS.
Value | Explanation | Example |
---|---|---|
all | Used for all media type devices. Default Value | Run |
Used for printers. | Run | |
screen | Used for computer screens, tablets, smart-phones etc. | Run |
Media Features
The following are the list of media features available in CSS.
Value | Explanation | Example |
---|---|---|
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 |
scripting | Detects whether javaScript is available. | Run |
update | How quickly can the output device modify the appearance of the content. | Run |
width | Width of the viewport. | Run |
Using JavaScript
In the following example, we will demonstrate how to set the CSS @media
rule by using JavaScript.
Example
Reminder
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
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.