移動端適配 | 適配方案總結

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。