Медиа-запросы

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Media Queries Simple Examples

Css overflow-y property

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the
viewport is 480 pixels wide or wider (if the viewport is less than
480 pixels, the background-color will be pink):

Example

@media screen and (min-width: 480px) { body {
background-color: lightgreen; }}

The following example shows a menu that will float to the left of the page if
the viewport is 480 pixels wide or wider (if the viewport is less than
480 pixels, the menu will be on top of the content):

Example

@media screen and (min-width: 480px) { #leftsidebar
{width: 200px; float: left;} #main
{margin-left: 216px;}}

CSS @media Reference

Стиль и размер текста в css

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

❮ Previous
Next ❯

Background

Методы скрытия элементов веб-страниц

(This section is not normative.)

HTML4
and CSS2
currently support media-dependent style sheets tailored for different
media types. For example, a document may use different style sheets for
screen and print. In HTML4, this can be written as:

Inside a CSS style sheet, one can declare that sections apply to certain
media types:

The ‘’ and ‘’ media types are defined in HTML4. The
complete list of media types in HTML4 is: ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’,
‘’. CSS2 defines the same list,
deprecates ‘’ and adds
‘’ and ‘’. Also, ‘’ is used to indicate that the style sheet
applies to all media types.

Media-specific style sheets are supported by several user agents. The
most commonly used feature is to distinguish between ‘’ and ‘’.

There have been requests for ways to describe in more detail what type
of output devices a style sheet applies to. Fortunately HTML4 foresaw
these requests and defined a forward-compatible syntax for media types.
Here is a quote from :

Media queries, as described in this specification, build on the
mechanism outlined in HTML4. The syntax of media queries fit into the
media type syntax reserved in HTML4. The
attribute of HTML4 also exists in XHTML and generic XML. The same syntax
can also be used inside in the ‘’
and ‘’ rules of CSS.

However, the parsing rules for media queries are incompatible with those
of HTML4 so that they are consistent with those of media queries used in
CSS.

HTML5 (at the moment of writing
still work in progress) references the Media Queries specification
directly and thus updates the rules for HTML.

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%:

/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}
.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}
.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}
.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width:
100%;}@media only screen and (max-width: 768px) { /* For mobile phones: */

{ width: 100%; }}

Media Queries

A media query consists of a media type and zero or more expressions that check for the
conditions of particular media
features.

Statements regarding media queries in this section assume the is followed. Media queries that do not
conform to the syntax are discussed in the . I.e. the syntax takes precedence over requirements
in this section.

Here is a simple example written in HTML:

This example expresses that a certain style sheet
() applies to devices of a certain media type
(‘’) with certain feature (it
must be a color screen).

Here the same media query written in an @import-rule in CSS:

A media query is a logical expression that is either true or false. A
media query is true if the media type of the media query matches the media
type of the device where the user agent is running (as defined in the
«Applies to» line), and all expressions in the media query are true.

A shorthand syntax is offered for media queries that apply to all media
types; the keyword ‘’ can be left
out (along with the trailing ‘’).
I.e. if the media type is not explicitly given it is ‘’.

I.e. these are identical:

As are these:

Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media queries
in the comma-separated list are true, the whole list is true, and
otherwise false. In the media queries syntax, the comma expresses a
logical OR, while the ‘’ keyword
expresses a logical AND.

Here is an example of several media queries in a comma-separated list
using the an @media-rule in CSS:

If the media query list is empty (i.e. the declaration is the empty
string or consists solely of whitespace) it evaluates to true.

I.e. these are equivalent:

The logical NOT can be expressed through the ‘’ keyword. The presence of the keyword
‘’ at the beginning of the media
query negates the result. I.e., if the media query had been true without
the ‘’ keyword it will become false,
and vice versa. User agents that only support media types (as described in
HTML4) will not recognize the ‘’
keyword and the associated style sheet is therefore not applied.

The keyword ‘’ can also be used
to hide style sheets from older user agents. User agents must process
media queries starting with ‘’ as
if the ‘’ keyword was not present.

The media queries syntax can be used with HTML, XHTML, XML and the
@import and @media rules of CSS.

Here is the same example written in HTML, XHTML, XML, @import and
@media:

The specification has not
yet been updated to use media queries in the
pseudo-attribute.

If a media feature does not apply to the device where the UA is running,
expressions involving the media feature will be false.

The media feature ‘’ only applies to visual
devices. On an aural device, expressions involving ‘’ will therefore always be
false:

Expressions will always be false if the unit of measurement does not
apply to the device.

The ‘’ unit does not apply to
‘’ devices so the following
media query is always false:

Note that the media queries in this example would have been true if the
keyword ‘’ had been added to the
beginning of the media query.

To avoid circular dependencies, it is never necessary to apply the style
sheet in order to evaluate expressions. For example, the aspect ratio of a
printed document may be influenced by a style sheet, but expressions
involving ‘’ will be
based on the default aspect ratio of the user agent.

User agents are expected, but not required, to re-evaluate
and re-layout the page in response to changes in the user environment, for
example if the device is tilted from landscape to portrait mode.

Media Queries For Columns

A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes:

Large screens:

Medium screens:

Small screens:

Example

/* Create four equal columns that floats next to each other */.column {
float: left; width: 25%;}/* On screens that are 992px
wide or less, go from
four columns to two columns */@media screen and (max-width: 992px) {
.column { width: 50%; }}/* On screens that are
600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) { .column { width:
100%; }}

Tip: A more modern way of creating column layouts, is to use CSS Flexbox (see example below).
However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

To learn more about Responsive Web Design, read our Responsive Web Design Tutorial.

Example

/* Container for flexboxes */.row { display: flex;
flex-wrap: wrap;}/* Create four equal columns */.column { flex: 25%;
padding: 20px;}/* On screens that are 992px wide or less, go from
four columns to two columns */@media screen and (max-width: 992px) {
.column { flex: 50%; }}/* On screens that are 600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) { .row {
flex-direction: column; }}

Media Query Syntax

A media query consists of a media type and can contain one or more
expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) { CSS-Code;}

The result of the query is
true if the specified media type matches the type of device the document is
being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are
applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the
type will be implied.

You can also have different stylesheets for different media:

Media Queries For Menus

In this example, we use media queries to create a responsive navigation menu, that varies
in design on different screen sizes.

Large screens:

Home
Link 1
Link 2
Link 3

Small screens:

Home
Link 1
Link 2
Link 3

Example

/* The navbar container */.topnav { overflow: hidden;
background-color: #333;}/* Navbar links */.topnav a {  float:
left;  display: block;  color:
white;  text-align: center;  padding: 14px 16px;
text-decoration: none;}
/* On screens that are 600px wide or less, make the menu links stack on top
of each other instead of next to each other */@media screen and (max-width: 600px) {

.topnav a {    float: none;    width:
100%;  }}

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

CSS Media Queries — More Examples

Let us look at some more examples of using media queries.

Media queries are a popular technique for delivering a tailored style sheet to different devices. To demonstrate a simple example, we can change the background color for different devices:

Example

/* Set the background color of body to tan */body {
background-color: tan;}/* On
screens that are 992px or less, set the background color to blue */@media
screen and (max-width: 992px) { body {
background-color: blue; }}/* On screens that are 600px or less,
set the
background color to olive */@media screen and (max-width: 600px) {
body { background-color: olive; }}

Do you wonder why we use exactly 992px and 600px? They are what we call «typical breakpoints» for devices. You can read more about typical breakpoints in our Responsive Web Design Tutorial.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Definition and Usage

The rule is used in media queries to apply different styles for different media types/devices.

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

Using media queries are a popular technique for delivering a tailored style
sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features
provide more specific details to media queries, by allowing to test for a
specific feature of the user agent or display device. For example, you
can apply styles to only those screens that are greater, or smaller, than a
certain width.

Min Width to Max Width

You can also use the values to set a minimum width and a maximum width.

For example, when the browser’s width is between 600 and 900px, change the
appearance of a <div> element:

Example

@media screen and (max-width: 900px) and (min-width: 600px) {  div.example {
font-size: 50px;    padding: 50px;
border: 8px solid black;    background: yellow; }}

Using an additional value: In the example below, we add an additional media query to our already
existing one using a comma (this will behave like an OR operator):

Example

/* When the width is between 600px and 900px OR above 1100px
— change the appearance of <div> */@media screen and (max-width: 900px) and (min-width:
600px), (min-width:
1100px) {  div.example {
font-size: 50px;    padding: 50px;
border: 8px solid black;    background: yellow; }}

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

CSS Reference

CSS Properties

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Syntax

The media query syntax is described in terms of the CSS2 grammar. As such,
rules not defined here are defined in CSS2. The
production defined below replaces the
production from CSS2.

media_query_list
 : S* * ]?
 ;
media_query
 : ? S* media_type S* *
 | expression *
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* ? ')' S*
 ;
media_feature
 : IDENT
 ;

COMMENT tokens, as defined by CSS2, do not occur in the grammar (to keep
it readable), but any number of these tokens may appear anywhere between
other tokens.

The following new definitions are introduced:

L  l|\\0{0,4}(4c|6c)(\r\n|)?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|)?|\\y

The following new tokens are introduced:

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

is to be added to the CSS2
production.

CSS style sheets are generally case-insensitive, and this is also the
case for media queries.

In addition to conforming to the syntax, each media query needs to use
media types and media features according to their respective specification
in order to be considered conforming.

Only the first media query is conforming in the example below because
the «example» media type does not exist.

3.1. Error Handling

For media queries that are not conforming user agents need to follow the
rules described in this section.

Unknown media types. Unknown media types evaluate to
false. Effectively, they are treated identically to known media types
that do not match the media type of the device.

The media query «» will evaluate to false, unless
is actually a supported media type. Similarly,
«» will evaluate to true.

Unknown media types are distinct from media types that do
not actually match the IDENT production. Those fall under the malformed
media query clause.
Unknown media features. User agents are to represent
a media query as «» when one of the specified media
features is not known.

In this example, the first media query will be represented as
«» and evaluate to false and the second media query
is evaluated as if the first had not been specified, effectively.

Is represented as «» because the ‘’ feature does not accept the
‘’ prefix.
Unknown media feature values. As with unknown media
features, user agents are to represent a media query as «» when one of the specified media feature values is not known.

The media query specifies an unknown
value for the ‘’ media feature
and is therefore represented as «».

This media query is represented as «» because
negative lengths are not allowed for the ‘’ media feature:
Malformed media query. User agents are to handle
unexpected tokens encountered while parsing a media query by reading
until the end of the media query, while observing of (), [], {}, «», and », and correctly
handling escapes. Media queries with unexpected tokens are represented
as «».

The following is an malformed media query because having no space
between ‘’ and the expression is
not allowed. (That is reserved for the functional notation syntax.)

Media queries are expected to follow the error handling rules of the
host language as well.

… will not apply because the semicolon terminates the
rule in CSS.