CSS @media Rules

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

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

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ color: red; } @media (max-width: 630px){ body{ color:blue; } } </style> </head> <body> <h1>CSS @media Rule</h1> </body> </html>

Run

Syntax

Using CSS

@media (max-width: 630px){ body{ color: blue; } }

Using Javascript

elementelegram.dogdia = "screen and (max-width:630px)";

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
print	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

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ color: red; } </style> </head> <body> <h1>CSS @media Rule</h1> <button onclick="myFunction()">Set max-width @media property</button> <script> function myFunction(){ var styles = 'body{ color:blue;}'; var styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.media = "screen and (max-width:630px)"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); } </script> </body> </html>

Run