Shulou(Shulou.com)06/01 Report--

Media type

In CSS2, media queries are used only in and tags and exist as the media attribute

The media attribute is used to specify different styles for different media types.

Screen computer screen (default) tty teletypewriter and similar media tv TV type devices using equal width character grids (low resolution, limited screen tumbling ability) projection projectors handheld handheld devices (small screen, Limited bandwidth) print print preview mode / print page braille Braille feedback device aural speech synthesizer all for all devices

The really widely used media types that are compatible with all browsers are 'screen'' and 'all''

.box {height: 100pxash width: 100px; background-color: lightblue;} Media attribute

Media attributes are new to CSS3, and most media properties are prefixed with "min-" and "max-" to express "less than or equal to" and "greater than or equal to". This avoids the use of "" characters that conflict with HTML and XML

[note] Media properties must be wrapped in parentheses (), otherwise they are invalid

All media attributes are listed in the following table

Width | min-width | max-width height | min-height | max-height device-width | min-device-width | max-device-width device-height | min-device-height | max-device-height aspect-ratio | min-aspect-ratio | max-aspect-ratio device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio color | min-color | max-color color-index | min-color-index | max-color -index monochrome | min-monochrome | max-monochrome resolution | min-resolution | max-resolution scan | grid

[1] Color (color)

Specifies the bit value of each pixel unit of the output device. If the device does not support output colors, the value is 0

Apply a style sheet to all devices that can display colors

@ media (color) {.box {height: 100pxscape width: 100pxscape backgroundcolor: lightblue;}}

[2] Color Index (color-index)

The color index specifies the number of entries in the color lookup table in the output device, which is equal to 0 if the color lookup table is not used

Apply a style sheet to all devices that use at least 256 indexed colors (the following code is not displayed, indicating that the return value is 0)

@ media (min-color-index: 256) {.box {height: 100px; width: 100px

[3] aspect ratio (aspect-ratio)

The aspect ratio describes the aspect ratio of the target display area of the output device. The value contains two positive integers separated by "/". Represents the ratio of horizontal pixels (the first value) to the number of vertical pixels (the second value)

Apply stylesheets to devices where the visual area is square or widescreen

@ media (min-aspect-ratio: 1Accord 1) {.box {height: 100pxash width: 100px; background-color: lightgreen;}}

[4] equipment aspect ratio (device-aspect-ratio)

The aspect ratio of the device describes the aspect ratio of the output device. The value contains two positive integers separated by "/". Represents the ratio of horizontal pixels (the first value) to the number of vertical pixels (the second value)

Apply stylesheets to special widescreen devices with an aspect ratio of 16:9

@ media (device-aspect-ratio:16/9) {.box {height: 100pxits width: 100px; background-color: pink;}}

[5] equipment height (device-height)

The device height describes the height of the output device.

Apply a stylesheet to a document displayed on the screen of the minimum height 1000px

@ media (min-device-height: 1000px) {.box {height: 100pxits width: 100px; background-color: pink;}}

[6] device width (device-width)

Device width describes the width of the output device

Apply a stylesheet to a document displayed on the screen of the minimum width 1000px

@ media (min-device-width: 1000px) {.box {height: 100px; width: 100px

[7] Grid (grid)

The grid determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a teletypewriter terminal or a phone that displays only one glyph), the value is 1, otherwise 0

Apply stylesheets to non-grid devices

@ media (grid:0) {.box {height: 100pxits width: 100px; background-color: lightgreen;}}

[8] height (height)

Height describes the height of the rendering area of the output device, such as the height of the visual area or the height of the printer tray

Apply stylesheets to devices that are higher than the visual area of 800px

@ media (min-height:800px) {.box {height: 100px; width: 100pxscape: lightgreen;}}

[9] width (width)

Width describes the width of the rendering area of the output device

Apply stylesheets to devices with a visual area that is wider than 800px

@ media (min-width:800px) {.box {height: 100pxits width: 100px; background-color: lightgreen;}}

[10] Black and white (monochrome)

Black and white specifies the number of bits per pixel for a black-and-white (grayscale) device. If it is not a black and white device, the value is 0

Apply stylesheets to non-black and white devices

@ media (monochrome:0) {.box {height: 100px; width: 100px; background-color: lightgreen;}}

[11] direction (orientation)

The direction specifies whether the device is in horizontal (width greater than width) mode or vertical (height greater than width) mode

Value: landscape (horizontal screen) | portrait (vertical screen)

Apply a style sheet to a vertical screen device

@ media (orientation: portrait) {.box {height: 100pxits width: 100pxbot backgroundlycolor: lightgreen;}}

[12] Resolution (resolution)

Resolution specifies the resolution (pixel density) of the output device. Resolution can be expressed in dots per inch (dpi) or per centimeter (dpcm)

[note] the relevant content about the three elements of the screen (screen size, resolution, pixel density) has come to this point.

Apply styles to devices with at least 90 points per inch

@ media (min-resolution: 90dpi) {.box {height: 100pxits width: 100px; background-color: lightgreen;}}

[13] scan (scan)

The scan describes the scanning process of the TV output device.

Value: progressive | interlace

Grammar

The media query contains an existing media type of CSS2 (or media type) and new media attributes of one or more expressions added by CSS3, which are parsed to true or false.

When the media query is true, the relevant stylesheets or style rules are applied according to the normal cascading rules. Even if the media query returns false, the stylesheet with the media query on the tag will still be downloaded (just not applied)

Media is not 'print', so the media query is fake. However, the style.css file is still downloaded

Logical operator

The operators not, and, only, and comma (,) can be used to build complex media queries

And

The and operator is used to combine multiple media attributes into the same media query. The result of this query is true only if each attribute is true.

[note] without using the not or only operators, the media type is optional and defaults to all

Apply the style sheet to meet the conditions of horizontal screen and minimum width of 700px

Media all and (min-width: 700px) and (orientation: landscape) {.}

Since the media type is optional without using the not or only operator, the default is all, so it can be abbreviated to

Media (min-width: 700px) and (orientation: landscape) {.}

Or

Put multiple media queries together separated by commas; as long as any one of them is true, the entire media statement returns true, equivalent to the or operator

Meet the application style sheet of handheld devices with a minimum width of 700 pixels or horizontal screen

Media (min-width: 700px), handheld and (orientation: landscape) {...}

Not

The not operator is used to reverse the result of a media query.

[note] the not keyword can only be applied to the entire query, not to a separate query

@ media not all and (monochrome) {.} / / is equivalent to @ media not (all and (monochrome)) {.}

Only

The only operator indicates that the specified style is applied only if the media query matches successfully. You can use it to keep the selected style from being applied in older browsers

[note] it has been tested that whether or not the only operator is used has no effect on the result.

.box {width: 100pxscape height: 100pxscape backgroundlycolor: pink;}

In fact, of the four kinds of logic, only, not, and and or (represented by commas), only and is more commonly used.

Method

The window.matchMedia () method is used to check the mediaQuery statement of CSS

[note] IE9- browser does not support it. You can use the third-party function library matchMedia.js.

Attribute

The window.matchMedia () method takes a string from a mediaQuery statement as a parameter and returns a MediaQueryList object. The object has two properties, media and matches

Media: returns the mediaQuery statement string matches: returns a Boolean value indicating whether the current environment matches the query statement var result = window.matchMedia ('(min-width: 600px)'); console.log (result.media); / /'(min-width: 600px) 'console.log (result.matches); / / true

You can set the corresponding settings according to the different results of the matches property of the matchMedia () method

Var result = window.matchMedia ('(min-width: 600px)'); if (result.matches) {/ /} else {/ /

[note] if window.matchMedia cannot parse the mediaQuery parameter, the matches property always returns false instead of an error

Var result = window.matchMedia ('123'); console.log (result.matches); / / false

Event

The MediaQueryList object returned by the window.matchMedia method has two methods to listen for events: the addListener method and the removeListener method.

/ / specify the callback function mql.addListener (mqCallback); / / undo the callback function mql.removeListener (mqCallback)

Note that the specified callback function is called only when the result of the mediaQuery query changes.

Therefore, if you want the mediaQuery query to remain unchanged, you need to call the function once in advance.

The following example is that when the page width is less than 1000px, the background color of the page is magenta; otherwise, it is light blue.

Var mql = window.matchMedia ("(min-width: 1000px)"); mqCallback (mql); mql.addListener (mqCallback); function mqCallback (mql) {if (mql.matches) {document.body.background = 'pink';} else {document.body.background =' lightblue';}}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.