Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
84 views5 pages

Media Query

Media queries allow customizing a website's presentation according to screen size by displaying different markups for mobile, desktop, and tablet. A media query checks properties like viewport width and height, device width and height, orientation, and resolution. It consists of a media type like screen followed by a media feature in parentheses, like max-width, along with CSS rules to apply if the condition is true. Common media features test the width, height, orientation, and resolution of the device.

Uploaded by

kumarshravan66712
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
84 views5 pages

Media Query

Media queries allow customizing a website's presentation according to screen size by displaying different markups for mobile, desktop, and tablet. A media query checks properties like viewport width and height, device width and height, orientation, and resolution. It consists of a media type like screen followed by a media feature in parentheses, like max-width, along with CSS rules to apply if the condition is true. Common media features test the width, height, orientation, and resolution of the device.

Uploaded by

kumarshravan66712
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Media Queries

Media queries

Media queries are used when we want to customize our website's presentation according to
the user's screen size. With the help of media queries, you can display different markups
based upon the device's general type(mobile, desktop, tablet).

A media query is a logical operation. Whenever a media query becomes true, then the related
CSS is applied to the target element.
Media queries

Media queries can be used to check many things, such as:

• width and height of the viewport


• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Syntax :
@media media-type and (media-feature)
{
/* CSS Rules to be applies*/
}
Media queries

Media queries example:


@media screen and (max-width: 800px)
{
#box2 {
background-color: black;
}
}

• @media: A media query always starts with @media.

• Screen: It is the applicable media type.

• max-width: It is the media feature.

• (background-color: black) : It is the CSS to be applied when the conditions


are met. Now, we will spend some time understanding how to use media queries on a
website.
Media features

Media features describe specific characteristics of the user agent, output device, or environment.
Media feature expressions test for their presence or value, and are entirely optional. Each media
feature expression must be surrounded by parentheses. .

• Hover
• color
• Device-height
• Device-width
• Display-mode
• Grid

You might also like