CSS3 Media query:Syntax:<media_query_list>:<media_query>[,<media_query>]<media_query>:only|not <mediaType> and <expression>[and <expression>]<expression>:<mediaFeature>:<value>The keyword "not" takes the complement set, "only" is no longer recommended (not,only is optional), "," uses the comma usage in the CSS selector to represent a write-in.
@media not|only MediaType and (mediafeature) { CSS Codes;}or<link rel= "stylesheet" media= "not|only mediatype and (mediafeature)" href= "Mystylesheet.css" >or<style type= "text/css" media= "not|only mediatype and (mediafeature)" >@import url ("Mystylesheet.css"); </style>
and: (This can be used in the style tag, also can be used in a CSS file)@media not|only MediaType and (mediafeature) { Selector {attribute: property value; }}
Most media queries accept the prefix min or max, which means greater than or equal to or less than or equal to. (Remember that min and Max correspond to the order, not to be misled by appearances)spaces must be left before and after, for example: (the browser does not produce any effect)@media screen and (max-width:600px) {h2{color:red }}
Media Type: (some types have been removed from CSS3)All--For all devicesPrint -for printer and print previewscreen-for computers, tablets, mobile screens (usually only with this and all)speech--for audible devices such as screen readers
Media Features:Width -The width of the visible area of the page (typically only with this and device-width)Height--the height of the visible area of the pageDevice-width--wide screen visibility area of the deviceDevice-height--high screen visibility area of the deviceAspect-ratio--ratio of width to height of equipmentDevice-aspect-ratio--ratio of device-width and device-height of equipmentResolution--resolution of the device, such as 96dpi, 300DPI,118DPCMOrientation--Defines whether height is greater than or equal to width, the value portrait represents Yes, landscape represents noall of the above parameters (except the last one) can be prefixed with max-or min-. The first four parameters are commonly used, units are absolute units of CSS, including px em mm cm and so on. Partial usage:@media screen and (orientation:portrait) {h2{color:red;/*High >= width of the page, H2 Red generally used for testing equipment in the horizontal or vertical, portrait vertical screen */ }}
@media screen and (MAX-ASPECT-RATIO:4/3) {h2{color:red;/*the width of the page and <=4 than 3,H2 red no max or min prefixes mean absolute equals, for example ASPECT-RATIO:4/3 indicates that only the width ratio is 4/3 when the CSS code is executed, and for attributes such as width */ }}
@media screen and (min-resolution:96dpi) {h2{color:red;/*Device screen resolution >=96DPI,H2 turn red You can also use a unit like 118DPCM */ }}all parameters See: http://www.runoob.com/cssref/css3-pr-mediaquery.html
Several screen width settings are commonly used:@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 features:The Window.matchmedia () method takes a string of media_query statements as a parameter, returning a Mediaquerylist object that has media and matches two properties. media: Returns the queried Media_query statement stringmatches: Returns a Boolean value that indicates whether the current environment matches the query statementNote: If Matchmedia cannot resolve the Media_query parameter, the Matches property returns always False, not an errorFor 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 RemoveListenerMql.addlistener (mqcallback);Mql.removelistener (mqcallback);Note that the specified callback function mqcallback is called only when the Mediaquery query result changes, so if you want mediaquery the query to be unchanged, the effect is displayed and you need to call the function in advance.
The following example is when the page width is less than 1000px, the page background color is magenta; otherwise it is light blue:var mql = Window.matchmedia ("(min-width:1000px)");//mql = media query listfunction Mqcallback (MQL) {if (mql.matches) { document.body.background = ' Pink '; }else{document.body.background = ' lightblue '; }}Mqcallback (MQL);Mql.addlistener (mqcallback);//Note that the AddListener trigger condition is that when the matches value is changed each time, only true<->false is called change, true<->true or false<-> False does not change and does not trigger addlistener.
CSS3 and JS Media query tutorial
