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

This article mainly introduces "how to write CSS3 media query code". In daily operation, I believe many people have doubts about how to write CSS3 media query code. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to write CSS3 media query code". Next, please follow the editor to study!

CSS3 Media Enquiry:

Syntax:

: [,]

: only | not and [and]

::

The keywords "not" take a complement, "only" is no longer recommended (not,only is optional), "," usage is the same as the comma usage in the CSS selector, indicating a kind of co-writing.

@ media not | only mediaType and (mediaFeature) {

CSS Codes

}

Or

Or

@ import url ("mystylesheet.css")

And: (this can be used in style tags or in a css file)

@ media not | only mediaType and (mediaFeature) {

Selector {

Attributes: attribute valu

}

}

Most media queries accept the prefix min or max, which means greater than or less than or equal to. (remember the order of min and max, don't be misled by appearances.)

Spaces must be left before and after the and, for example: (the browser does not produce any effect)

@ media screen and (max-width:600px) {

H3 {

Color:red

}

}

Media type: (some types have been removed from CSS3)

All-for all Devic

Print-for printers and print previews

Screen-for computers, tablets, mobile phone screens (usually only this and all)

Speech-for audible devices such as screen readers

Media Features:

Width-the width of the visible area of the page (usually only this and device-width are used)

Height-the height of the visible area of the page

Device-width-the width of the screen visible area of the device

Device-height-the screen visible area of the device is high

Aspect-ratio-the ratio of width to height of the device

Device-aspect-ratio-the ratio of device-width to device-height of the device

Resolution-the resolution of the device, such as 96dpi, 300dpcm 118dpcm

Orientation-defines whether height is greater than or equal to width. The value portrait represents yes, and landscape represents no.

The above parameters (except the last one) can be prefixed with max- or min-.

The first four parameters are commonly used, all of which are absolute units of CSS, including px em mm cm and so on.

Partial usage:

@ media screen and (orientation:portrait) {

H3 {

Color:red

}

}

@ media screen and (max-aspect-ratio:4/3) {

H3 {

Color:red

}

}

@ media screen and (min-resolution:96dpi) {

H3 {

Color:red

}

}

For more information on all parameters, please see:

Several commonly used screen width settings:

@ media screen and (min-width:1200px) {

Css-code

}

@ media screen and (min-width:960px) and (max-width:1199px) {

Css-code

}

@ media screen and (min-width:768px) and (max-width:959px) {

Css-code

}

@ media screen and (min-width:480px) and (max-width:767px) {

Css-code

}

@ media screen and (max-width:479px) {

Css-code

}

Use JS to dynamically query media characteristics:

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

Media: returns the string of media_query statements queried

Matches: returns a Boolean value indicating whether the current environment matches the query statement

Note: if matchMedia cannot parse the media_query parameter, the matches property always returns false, not an error

For example:

Var result=window.matchMedia ("screen (min-width: 600px)")

Console.log (result.media); / / "(min-width: 600px)"

Console.log (result.matches); / / true

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

Mql.addListener (mqCallback)

Mql.removeListener (mqCallback)

Note that the specified callback function mqCallback is called only when the result of the mediaQuery query changes, so if you want the mediaQuery query to remain unchanged, the corresponding effect will be displayed, and the function needs to be called 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)); / / mql=media query list

Function mqCallback (mql) {

If (mql.matches) {

Document.body.background='pink'

} else {

Document.body.background='lightblue'

}

}

MqCallback (mql)

Mql.addListener (mqCallback)

/ / Note that the trigger condition of addListener is that every time you change the value of matchs, only truefalse is called a change, and truetrue or falsefalse is not a change and will not trigger addListener.

At this point, the study on "how to write the CSS3 media query code" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.