CSS3 and JS media query tutorials and CSS3JS media tutorials

CSS3 and JS media query tutorials and CSS3JS media tutorials
CSS3 media query: Syntax: <media_query_list >:< media_query> [, <media_query>] <media_query>: only | not <mediaType> and <expression> [and <expression>] <expression >:< mediaFeature >:< value> keyword "not" to obtain the population, "only" is no longer recommended (not, only is optional). "," is used in the same way as the comma in the CSS selector, indicating a combination.
@ 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 style labels or in a css file) @ media not | only mediaType and (mediaFeature) {selector {attribute: attribute value ;}}
Most media queries accept the prefix min or max, indicating that the value is greater than or equal to or less than or equal. (Remember the order of min and max, and do not be misled by the representation.) and must be left with spaces 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 deleted from CSS3) all -- print for all devices -- print for printer and preview screen -- for computer, tablet, and mobile screen (generally only this and all are used) speech-used for screen reader and other voice equipment
Media features: width -- the width of the visible area of the page (usually only this and device-width are used) height -- high device-width of the visible area on the page -- device-height of the visible area on the screen -- aspect-ratio of the visible area on the screen of the device -- ratio of the width to height of the device- aspect-ratio -- device-width-to-device-height ratio resolution -- device resolution, for example, 96 dpi, 300 dpi, 118 dpcmorientation -- defines whether the height is greater than or equal to width. The value portrait indicates yes, and landscape indicates no. The preceding parameter (except the last one) can be prefixed with max-or min. The first four parameters are commonly used. Unit: absolute unit of CSS, including px em mm cm. Some Usage: @ media screen and (orientation: portrait) {h2 {color: red;/* the height of the page> = width. h2 turns red, which is generally used to detect whether the device is in the horizontal or vertical direction, portrait screen */}}
@ Media screen and (max-aspect-ratio: 4/3) {h2 {color: red;/* Page width to height ratio <= 4 to 3, if h2 is red, without the max or min prefix, it indicates that it is absolutely equal. For example, aspect-ratio: 4/3 indicates that the css code is executed only when the width ratio is 4/3, the same applies to attributes such as width */}}
@ Media screen and (min-resolution: 96 dpi) {h2 {color: red;/* Device screen resolution> = 96 dpi, h2 red you can also use 118dpcm units */} All parameters see: http://www.runoob.com/cssref/css3-pr-mediaquery.html
Common screen width settings: @ media screen and (min-width: pixel px) {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 accepts a media_query statement string as a parameter and returns a MediaQueryList object, which has two attributes: media and matches. Media: returns the queried media_query statement string matches: returns a Boolean value indicating whether the current environment matches the query statement. Note: If matchMedia cannot parse the media_query parameter, the returned value of the matches attribute is always false, instead of reporting 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 to events: addListener and removeListenermql. addListener (mqCallback); mql. removeListener (mqCallback); note that the specified callback function mqCallback is called only when the mediaQuery query results change. Therefore, if the mediaQuery query does not change, the corresponding effect is displayed, the callback function must be called in advance.
The following example shows that when the page width is less than PX, the background color of the page is in red; otherwise, it is in 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 each time the matches value is changed, only true <-> false is called a change, true <-> true or false <-> false does not change or triggers addListener.