移动端适配 | 适配方案总结
一、媒体查询
通过特定的限制，控制不同样式的呈现；
限制条件最终返回true/false，为真，应用其样式；
即使媒体查询返回false，<link> 标签指向的样式表也将会被下载(但是它们不会被应用)；
1 <!-- link元素中的CSS媒体查询 --> 2 <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 3 4 <!-- 样式表中的CSS媒体查询 --> 5 <style> 6 @media (max-width: 600px) { 7 .facet_sidebar { 8 display: none; 9 } 10 } 11 </style>
操作逻辑 - only, and, not
你可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。
（1）and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。
1 // and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的all媒体类型，可能像这样子： 2 3 @media (min-width: 700px) { ... } 4 如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性： 5 6 (min-width: 700px) and (orientation: landscape) { ... } 7 现在上面的媒体查询仅在可视区域宽度不小于700像素并在横屏时有效。如果，你仅想在电视媒体上应用，你可以使用 and 操作符合并媒体属性： 8 9 @media tv and (min-width: 700px) and (orientation: landscape) { ... } 10 现在，上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。
媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。
1 // 如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写： 2 3 @media (min-width: 700px), handheld and (orientation: landscape) { ... } 4 // 如上，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。
（2）not操作符用来对一条媒体查询的结果进行取反。not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询
（3）only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。
1 <link rel="stylesheet" media="only screen and (color)" href="example.css" />
媒体特征：
1 向所有能显示颜色的设备应用样式表： 2 @media all and (color) { ... } 3 4 向每个颜色单元至少有4个比特的设备应用样式表： 5 @media all and (min-color: 4) { ... }
二、remjs适配方案
1 window.onload = function(){ 2 /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 3 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ 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 }
使用示例：
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>
三、移动端适配基础
1 <meta name="viewport" content="width=device-width; user-scalable=no" />
user-scalable=yes/no 是否允许用户缩放 ios10无效，通过事件解决
https://github.com/jawil/blog/issues/21
