Media screen size html

@media

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Note: In JavaScript, the rules created using @media can be accessed with the CSSMediaRule CSS object model interface.

Try it

Syntax

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

/* At the top level of your code */ @media screen and (min-width: 900px)  article  padding: 1rem 3rem; > > /* Nested within another conditional at-rule */ @supports (display: flex)  @media screen and (min-width: 900px)  article  display: flex; > > > 

For a discussion of media query syntax, please see Using media queries.

Description

Media types

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type is implied.

Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)

Intended primarily for screens.

Note: CSS2.1 and Media Queries 3 defined several additional media types ( tty , tv , projection , handheld , braille , embossed , and aural ), but they were deprecated in Media Queries 4 and shouldn’t be used.

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.

Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.

Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.

Width-to-height aspect ratio of the viewport

Number of bits per color component of the output device, or zero if the device isn’t color

Approximate range of colors that are supported by the user agent and output device. Added in Media Queries Level 4.

Number of entries in the output device’s color lookup table, or zero if the device does not use such a table

Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4.

Height of the rendering surface of the output device. Deprecated in Media Queries Level 4.

Width of the rendering surface of the output device. Deprecated in Media Queries Level 4.

The display mode of the application, as specified in the web app manifest’s display member. Defined in the Web App Manifest spec.

Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device. Added in Media Queries Level 5.

Detect whether user agent restricts color palette. Added in Media Queries Level 5.

Does the device use a grid or bitmap screen?

Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.

Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5.

Bits per pixel in the output device’s monochrome frame buffer, or zero if the device isn’t monochrome.

Orientation of the viewport.

How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.

Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.

Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.

Detect if the user prefers a light or dark color scheme. Added in Media Queries Level 5.

Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors. Added in Media Queries Level 5.

The user prefers less motion on the page. Added in Media Queries Level 5.

Pixel density of the output device.

Detects whether scripting (i.e. JavaScript) is available. Added in Media Queries Level 5.

How frequently the output device can modify the appearance of content. Added in Media Queries Level 4.

Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5.

Width of the viewport including width of scrollbar.

Logical operators

The logical operators not , and , only , and or can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

Used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true . It is also used for joining media features with media types.

Used to negate a media query, returning true if the query would otherwise return false . If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.

Note: In Level 3, the not keyword can’t be used to negate an individual media feature expression, only an entire media query.

Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using only , older browsers would interpret the query screen and (max-width: 500px) as screen , ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is true , the entire media statement returns true . In other words, lists behave like a logical or operator.

Equivalent to the , operator. Added in Media Queries Level 4.

Accessibility concerns

To best accommodate people who adjust a site’s text size, use em s when you need a for your media queries.

Both em and px are valid units, but em works better if the user changes the browser text size.

Also consider using Level 4 media queries to improve the user’s experience. For example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses.

Security

Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a «fingerprint» which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox’s «Resist Fingerprinting» setting is enabled, many media queries report default values rather than values representing the actual device state.

Formal syntax

Examples

Testing for print and screen media types

@media print  body  font-size: 10pt; > > @media screen  body  font-size: 13px; > > @media screen, print  body  line-height: 1.2; > > @media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi)  body  line-height: 1.4; > > 

Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:

@media (height > 600px)  body  line-height: 1.4; > > @media (400px )  body  line-height: 1.4; > > 

For more examples, please see Using media queries.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Using media queries
• In JavaScript, @media can be accessed via the CSS object model interface CSSMediaRule .
• Extended Mozilla media features
• Extended WebKit media features

Found a content problem with this page?

This page was last modified on Jun 23, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Responsive Web Design — Media Queries

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example

If the browser window is 600px or smaller, the background color will be lightblue:

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Desktop

Phone

Use a media query to add a breakpoint at 768px:

Example

When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:

@media only screen and (max-width: 768px) /* For mobile phones: */
[class*=»col-«] width: 100%;
>
>

Always Design for Mobile First

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Example

/* For mobile phones: */
[class*=»col-«] width: 100%;
>

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

Desktop

Tablet

Phone

We do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px):

Example

Note that the two sets of classes are almost identical, the only difference is the name ( col- and col-s- ):

/* For mobile phones: */
[class*=»col-«] width: 100%;
>

It might seem odd that we have two sets of identical classes, but it gives us the opportunity in HTML, to decide what will happen with the columns at each breakpoint:

HTML Example

For desktop:

The first and the third section will both span 3 columns each. The middle section will span 6 columns.

For tablets:

The first section will span 3 columns, the second will span 9, and the third section will be displayed below the first two sections, and it will span 12 columns:

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

Example

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called «Landscape» orientation:

Example

The web page will have a lightblue background if the orientation is in landscape mode:

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen sizes:

Example

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) div.example display: none;
>
>

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on different screen sizes:

Variable Font Size.

Example

/* If the screen size is 601px or more, set the font-size of

/* If the screen size is 600px or less, set the font-size of to 30px */
@media only screen and (max-width: 600px) div.example font-size: 30px;
>
>

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Источник