Media запросы css стандартные

Using media queries

Media queries allow you to apply CSS styles depending on a device’s general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following:

• To conditionally apply styles with the CSS@media and @importat-rules.
• To target specific media for the , , , and other HTML elements with the media= attribute.
• To test and monitor media states using the Window.matchMedia() and EventTarget.addEventListener() methods.

Note: The examples on this page use CSS’s @media for illustrative purposes, but the basic syntax remains the same for all types of media queries.

Syntax

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.

• Media types define the broad category of device for which the media query applies: all , print , screen . The type is optional (assumed to be all ) except when using the not or only logical operators.
• Media features describe a specific characteristic of the user agent, output device, or environment:
  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • device-aspect-ratio Deprecated
  • device-height Deprecated
  • device-width Deprecated
  • display-mode
  • dynamic-range
  • forced-colors
  • grid
  • height
  • hover
  • inverted-colors
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-transparency Experimental
  • resolution
  • scripting
  • update
  • video-dynamic-range
  • width .

  A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

  Note: A style sheet with a media query attached to its tag will still download even if the query returns false , the download will happen but the priority of downloading will be much lower. Nevertheless, its contents will not apply unless and until the result of the query changes to true . You can read why this happens in Tomayac’s blog Why Browser Download Stylesheet with Non-Matching Media Queries.

  Targeting media types

  Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers:

  You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:

  See media type for a list of all media types. Because they describe devices in only very broad terms, just a few are available; to target more specific attributes, use media features instead.

  Targeting media features

  Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user’s primary input mechanism (such as a mouse) can hover over elements:

  Many media features are range features, which means they can be prefixed with «min-» or «max-» to express «minimum condition» or «maximum condition» constraints. For example, this CSS will apply styles only if your browser’s viewport width is equal to or narrower than 1250px:

  If you create a media feature query without specifying a value, the nested styles will be used as long as the feature’s value is not zero (or none , in Level 4). For example, this CSS will apply to any device with a color screen:

  If a feature doesn’t apply to the device on which the browser is running, expressions involving that media feature are always false.

  For more Media feature examples, please see the reference page for each specific feature.

  Creating complex media queries

  Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not , and , and only . Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations.

  In the previous example, we’ve already seen the and operator used to group a media type with a media feature. The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

  Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

  Combining multiple types or features

  The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

  @media (min-width: 30em) and (orientation: landscape)  /* … */ > 

  To limit the styles to devices with a screen, you can chain the media features to the screen media type:

  @media screen and (min-width: 30em) and (orientation: landscape)  /* … */ > 

  Testing for multiple queries

  You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:

  @media (min-height: 680px), screen and (orientation: portrait)  /* … */ > 

  Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

  Inverting a query’s meaning

  The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

  @media not all and (monochrome)  /* … */ > 

  This means that the above query is evaluated like this:

  @media not (all and (monochrome))  /* … */ > 

  It wouldn’t be evaluated like this:

  @media (not all) and (monochrome)  /* … */ > 

  As another example, the following media query:

  @media not screen and (color), print and (color)  /* … */ > 

  This means that the above query is evaluated like this:

  @media (not (screen and (color))), print and (color)  /* … */ > 

  Improving compatibility with older browsers

  The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

  @media only screen and (color)  /* … */ > 

  Syntax improvements in Level 4

  The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a «range» type, for example width or height, less verbose. Level 4 adds a range context for writing such queries. For example, using the max- functionality for width we might write the following:

  Note: The Media Queries Level 4 specification has reasonable support in modern browsers, but some media features are not well supported. See the @media browser compatibility table for more details.

  In Media Queries Level 4 this can be written as:

  Using min- and max- we might test for a width between two values like so:

  @media (min-width: 30em) and (max-width: 50em)  /* … */ > 

  This would convert to the Level 4 syntax as:

  Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with and, not, and or.

  Negating a feature with not

  Using not() around a media feature negates that feature in the query. For example, not(hover) would match if the device had no hover capability:

  Testing for multiple features with or

  You can use or to test for a match among more than one feature, resolving to true if any of the features are true. For example, the following query tests for devices that have a monochrome display or hover capability:

  See also

  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.

  Источник

  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

  to 80px */
  @media only screen and (min-width: 601px) div.example font-size: 80px;
  >
  >

  /* 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.

  Источник

  Читайте также:  Css align all elements center