Css3@media Implementation principle

Window.matchmedia () Basic usage

window.matchMediamethod is used to check the CSS mediaQuery statements. The latest versions of various browsers (including IE + +) support this method, and for older browsers that do not support this method, you can use the third-party library matchmedia.js.

CSS mediaQuery statements are a bit like if statements, as long as the display medium (including browser and screen, etc.) satisfies the mediaQuery conditions set by the statement, the statement inside the block executes. Here is mediaQuery An example of a statement.

@media all and (max-width: 700px) { body { background: #FF0; }}

The above CSS code indicates that the chunk is valid for all media (media) and the maximum width of the viewport must not exceed 700 pixels. If the condition is met, the body element's background is set to #ff0.

It is important to note that mediaQuery two widths/heights are accepted, one is the width/height of the viewport in the previous example, and one is the width/height of the device, and here is an example.

@media all and (max-device-width: 700px) { body { background: #FF0; }}

The width/height (width/height) of the viewport documentElement.clientWidth/clientHeight is measured in terms of css pixels, and the device's width/height (device-width/device-height) is measured by the pixel of the screen.width/height device hardware.

window.matchMediaMethod takes a mediaQuery string of a statement as a parameter and returns an MediaQueryList object. The object has the following two properties.

• media: Returns the statement string that is queried mediaQuery .
• matches: Returns a Boolean value that indicates whether the current environment matches the query statement.

var result = window.matchMedia(‘(min-width: 600px)‘);result.media // (min-width: 600px)result.matches // true

Here is another example of executing different JavaScript code depending on whether Mediaquery matches the current environment.

  var result =  Window. Matchmedia ( (result. Matches) {console. Log (} else {console. Log (}       

The following example mediaQuery loads the corresponding CSS style sheet based on whether the current environment is matched.

VarResult=Window.Matchmedia("(max-width:700px)");If(Result.Matches){VarLinkelm=Document.CreateElement( ' link ' ); linkelm. Setattribute ( ' rel '  ' stylesheet ' ); linkelm. Setattribute ( ' type '  ' text/css ' ); linkelm. Setattribute ( ' href '  ' small.css ' ); document. Head. Appendchild (linkelm}      

Note that if the window.matchMedia parameter cannot be resolved, the mediaQuery return is always false , not an error.

window.matchMedia(‘bad string‘).matches// false

Monitoring Events

The Mediaquerylist object returned by the Window.matchmedia method has two methods for listening to events: AddListener methods and RemoveListener methods. If the Mediaquery query result changes, the specified callback function is invoked.

VarMql=Window.Matchmedia("(max-width:700px)"); //Specify callback function mql. Addlistener (mqcallbackmql. (mqcallbackmqcallback (mql) { Span class= "K" >if  (mql. Matches) {//width less than or equal to 700 pixels } else Span class= "P" >{//width greater than 700 pixels }}      

In the above code, the parameters of the callback function are the Mediaquerylist object. There are two possible scenarios for calling a callback function. One is that the display width changes from more than 700 pixels to the following, and the other is from below 700 pixels to the above, so determine the current screen width inside the callback function.

[email protected] implementation principle