移动端适配 | 适配方案总结

时间 2019-12-10

标签移动适配方案总结栏目无线繁體版

原文原文链接

1、媒体查询

经过特定的限制，控制不一样样式的呈现；css

限制条件最终返回true/false，为真，应用其样式；html

即便媒体查询返回false，<link> 标签指向的样式表也将会被下载(可是它们不会被应用)；ios

 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, notgit

你可使用逻辑操做符，包括not、and和only等，构建复杂的媒体查询。github

（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逻辑操做符。当使用逗号分隔的媒体查询时，若是任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每一个查询都是独立的，一个查询中的操做符并不影响其它的媒体查询。ide

1 // 若是你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你能够这样写：
2 
3 @media (min-width: 700px), handheld and (orientation: landscape) { ... }
4 // 如上，若是是一个800像素宽的屏幕设备，媒体语句将会返回真，由于第一部分至关于 @media all and (min-width: 700px) 将会应用于该设备而且返回真，尽管个人屏幕媒体类型并不与第二部分的手持媒体类型相符。一样地，若是我是一个500像素宽的横屏手持设备，尽管第一部分由于宽度问题而不匹配，第二部分仍会成功，所以整个媒体查询返回真。

（2）not操做符用来对一条媒体查询的结果进行取反。not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询ui

（3）only操做符仅在媒体查询匹配成功的状况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操做符，必须明确指定一个媒体类型。spa

1 <link rel="stylesheet" media="only screen and (color)" href="example.css" />

媒体特征：scala

1 向全部能显示颜色的设备应用样式表：
2 @media all and (color) { ... }
3 
4 向每一个颜色单元至少有4个比特的设备应用样式表：
5 @media all and (min-color: 4) { ... }

2、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>

View Code

3、移动端适配基础

1 <meta name="viewport" content="width=device-width; user-scalable=no" />

user-scalable=yes/no 是否容许用户缩放 ios10无效，经过事件解决https://github.com/jawil/blog/issues/21