Using media queries – CSS: Cascading Style Sheets

Using media queries

Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Media queries are used for the following:

  • To conditionally apply styles with the CSS @media and @import at-rules.
  • To target specific media for the <stylevàgt;, <backlinksvàgt;, <sourcevàgt;, and other HTML elements with the media= attribute.
  • To check and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

chú ý: 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.

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

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.

chú ý: A style sheet with a media query attached to its <backlinksvàgt; tag will still download even if the query returns false, the download will happen but the priority of downloading will be much less. 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.

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 will be implied.

all

Suitable for all devices.

print

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.)

screen

Intended primarily for screens.

speech

Intended for speech synthesizers.

chú ý: 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. The aural type has been replaced by speech, which is similar.

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

Name
Summary
Notes

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

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

aspect-ratio
Width-to-height aspect ratio of the viewport

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

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

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

device-aspect-ratio

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

device-height

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

Xem Thêm  Cấu trúc của một tài liệu HTML - GeeksforGeeks - cấu trúc của trang html

device-width

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

display-mode
The display mode of the application, as specified in the website app manifest’s display thành viên
Defined in the Website App Manifest spec.

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

grid
Does the device use a grid or bitmap screen?

height
Height of the viewport

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

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

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

orientation
Orientation of the viewport

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

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

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

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

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

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

resolution
Pixel density of the output device

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

cập nhật
How frequently the output device can modify the appearance of content
Added in Media Queries Level 4.

width
Width of the viewport including width of scrollbar

The logical operators not, and, and only 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.

and

The and operator is 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.

not

The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated danh sách 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.

chú ý: In Level 3, the not từ khóa can’t be used to negate an individual media feature expression, only an entire media query.

only

The only operator is used to apply a style only if an entire query matches, and 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.

, (comma)

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

Xem Thêm  Nút radio trong HTML (Toàn bộ Hướng dẫn Với 10 Ví dụ) - nhóm nút radio html

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 screenreaders. For example, this CSS targets printers:

@media

print

{

...

}

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

@media

screen

,

print

{

...

}

See Media types for a danh sách 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.

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:

@media

(

hover

:

hover

)

{

...

}

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 12450px:

@media

(

max-width

:

12450px

)

{

...

}

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:

@media

(

color

)

{

...

}

If a feature doesn’t apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

@media

speech

and

(

aspect-ratio

:

11/5

)

{

...

}

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

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 danh sách; 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.

chú ý: 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.

The and từ khóa 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

)

{

...

}

You can use a comma-separated danh sách 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 điện thoại in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

Xem Thêm  Lớp đầu vào và máy quét của người dùng Java: Hướng dẫn từng bước - máy quét đầu vào của người dùng java

The not từ khóa 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 danh sách of media queries.) The not từ khóa 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

)

{

...

}

… so that the above query is evaluated like this:

@media

not

(

all

and

(

monochrome

)

)

{

...

}

… rather than like this:

@media

(

not

all

)

and

(

monochrome

)

{

...

}

As another example, the following media query:

@media

not

screen

and

(

color

)

,

print

and

(

color

)

{

...

}

… is evaluated like this:

@media

(

not

(

screen

and

(

color

)

)

)

,

print

and

(

color

)

{

...

}

The only từ khóa 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

)

{

...

}

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:

chú ý: 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.

@media

(

max-width

:

30em

)

{

...

}

In Media Queries Level 4 this can be written as:

@media

(

width <= 30em

)

{

...

}

Using min- and max- we might check 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

(

30em <= width <= 50em

)

{

...

}

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

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:

@media

(

not

(

hover

)

)

{

...

}

You can use or to check 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:

@media

(

not

(

color

)

)

or

(

hover

)

{

...

}

Viết một bình luận