1. Media inquiries
Control the rendering of different styles with specific constraints;
The constraint finally returns true/false, if it is true, its style is applied;
Even if the media query returns false, the stylesheets pointed to by the <link> tags will be downloaded (but they will not be applied);
1 <!-- CSS media queries in link elements --> 2 <link rel= " stylesheet " media= " (max-width: 800px) " href= " example.css " /> 3 4 <!-- styles CSS media query in table --> 5 <style> 6 @media (max - width: 600px) { 7 .facet_sidebar { 8 display: none; 9 } 10 } 11 </style>
Operational logic - only, and, not
You can build complex media queries using logical operators, including not, andand only, etc.
（1）andThe operator is used to combine multiple media properties into a single media query, making requests for chained features, and the result is true only if each property is true.
1 // and keyword is used to combine multiple media properties or combine media properties and media types. A basic media query, a media property with all media types specified by default, might look like this: 2 3 @media (min - width: 700px) { ... } 4 If you only want to apply this in landscape , you can use the and operator to merge media properties: 5 6 (min- width: 700px) and (orientation: landscape) { ... } 7 Now the above media query only works if the viewable area is at least 700px wide and in landscape Valid when the screen is on. If, you only want to apply on TV media, you can use the and operator to merge the media properties: 8 9 @media tv and (min- width: 700px) and (orientation: landscape) { ... } 10 Now, the above media The query is only valid on TV media, the viewable area is not less than 700 pixels wide and the screen is landscape.
Using commas to separate media queries has the same effect as orlogical operators. When using comma-separated media queries, styles are valid if any of the media queries return true. Each query in the comma-separated list is independent, and operators in one query do not affect other media queries.
1 // If you want to apply a set of styles to handheld devices with a minimum width of 700px or landscape, you can write: 2 3 @media (min - width: 700px), handheld and (orientation: landscape) { ... } 4 // As above, if it is an 800px wide screen device, the media statement will return true, because the first part is equivalent to @media all and (min-width: 700px) will apply to the device and return True, although my screen media type doesn't match the handheld media type of the second part. Likewise, if I'm a 500px wide handheld in landscape, the second part succeeds despite the first part not matching due to width issues, so the entire media query returns true.
（2）notThe operator is used to negate the result of a media query. notKeywords can only be applied to the entire query, not an individual query
（3）onlyThe operator is only used to apply a style if the media query matches successfully, which is useful to prevent the selected style from being applied in older browsers. If the notOR onlyoperator is used, a media type must be specified explicitly.
1 <link rel="stylesheet" media="only screen and (color)" href="example.css" />
Media Features:
1 Apply the style sheet to all devices capable of displaying colors: 2 @media all and (color) { ... } 3 4 Apply the style sheet to devices with at least 4 bits per color cell: 5 @media all and (min -color: 4 ) { ... }
2. remjs adaptation scheme
1 window.onload = function(){ 2 /* 720 represents the width of the design draft given by the designer, you can write as much as your design draft is; 100 represents the conversion ratio, here 100 is written as 3 for easy calculation in the future, for example , a width you measure is 100px, you can write it as 1rem, and 1px=0.01rem, etc. */ 4 getRem( 720 , 100 ) 5 }; 6 window.onresize = function(){ 7 getRem( 720 , 100 ) 8 }; 9 function getRem(pwidth,prem){ 10 var html = document.getElementsByTagName( " html " )[ 0 ]; 11 var oWidth = document.body.clientWidth || document.documentElement.clientWidth; 12 html.style.fontSize = oWidth/pwidth*prem + "px"; 13 }
Example of use:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" href="../css/reset-min.css"/> 8 <script> 9 window.onload = function(){ 10 getRem(720,100) 11 }; 12 window.onresize = function(){ 13 getRem(720,100) 14 }; 15 function getRem(pwidth,prem){ 16 var html = document.getElementsByTagName("html")[0]; 17 var oWidth = document.body.clientWidth || document.documentElement.clientWidth; 18 html.style.fontSize = oWidth/pwidth*prem + "px"; 19 } 20 </script> 21 <style> 22 .wrap{position:absolute;top:0;left:0;bottom:0;right:0;background:#fefefe;} 23 .title{width:100%;height:0.98rem;line-height:0.98rem;color:#fff;background:#e02222;text-align: center;font-size:0.32rem;} 24 </style> 25 </head> 26 <body> 27 <div class="wrap"> 28 <div class="title">首页</div> 29 </div> 30 </body> 31 32 </html>
Third, the mobile terminal adaptation basis
1 <meta name="viewport" content="width=device-width; user-scalable=no" />
Whether user-scalable=yes/no allows users to zoom ios10 is invalid, resolved through events
https://github.com/jawil/blog/issues/21