關於近期對於移動端開發的一些見解

首先移動端開發最基本的就是尺寸問題:javascript

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>php

這行代碼是確定知道要加的,可是咱們還會面臨在不一樣尺寸的屏幕上對應尺寸的大小變化。對於這個問題我以前看過不少網站對於這個的處理,我主要是採用小米官網對於這個的修改,單位用rem,代碼以下:css

! function(n) {
    var e = n.document,
        t = e.documentElement,
        i = 720,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function() {
            var n = t.clientWidth || 320;
            n > 720 && (n = 720), t.style.fontSize = n / d + "px"
        };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);

而後直接用rem這個單位就能夠了。切記100px=1rem;html

對於移動端還會用到jQuery-mobile、zepto.js、fastclick.js、swiper.js、lazyload.js、dropload.js等插件。html5

下面我會一個一個說。java

首先是jQuery-mobile和zepto.js,這倆主要是移動端的jQuery,主要是爲了方便咱們去操做。我用的是jquery-mobile,那我就主要說下這個吧,看代碼: 
jquery

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <title>會員登陸_DESTOON B2B網站管理系統手機版</title>
 7         <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
 8         <meta http-equiv="Cache-Control" content="no-siteapp" />
 9         <meta name="generator" content="DESTOON B2B - www.destoon.com" />
10         <meta name="format-detection" content="telephone=no" />
11         <meta name="apple-mobile-web-app-capable" content="yes" />
12         <meta name="apple-mobile-web-app-title" content="DESTOON B2B網站管理系統手機版" />
13         <meta name="apple-mobile-web-app-status-bar-style" content="default" />
14         <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
15         <meta name="mobile-web-app-capable" content="yes">
16         <link rel="icon" sizes="128x128" href="apple-touch-icon-precomposed.png">
17         <meta name="msapplication-TileImage" content="apple-touch-icon-precomposed.png">
18         <meta name="msapplication-TileColor" content="#007AFF">
19         <link rel="shortcut icon" type="image/x-icon" href="http://192.168.1.181:8087/favicon.ico" />
20         <link rel="bookmark" type="image/x-icon" href="http://192.168.1.181:8087/favicon.ico" />
21         <link rel="stylesheet" type="text/css" href="http://192.168.1.181:8087/mobile/static/lib/jquery/jquery.mobile.custom.structure.min.css" />
22         <link rel="stylesheet" type="text/css" href="http://192.168.1.181:8087/mobile/static/style.css" />
23         <script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/lib/jquery/jquery-2.1.1.min.js"></script>
24         <script src="http://192.168.1.181:8087/mobile/static/lib/rem.js" type="text/javascript" charset="utf-8"></script>
25         <script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/lib/jquery/jquery.mobile.custom.min.js"></script>
26         <script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/js/common.js"></script>
27         <!--<script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/js/fix.js"></script>-->
28 
29     </head>
30     <link rel="stylesheet" type="text/css" href="css/index.css" />
31     <link rel="stylesheet" type="text/css" href="dist/swiper.min.css" />
32 
33     <body>
34         <style type="text/css">
35             #menu {
36                 background-color: #FFFFFF;
37                 height: 100%;
38                 width: 303px;
39                 position: fixed;
40                 right: -303px;
41                 top: 0rem;
42             }
43             
44             .active {
45                 color: #fff;
46                 text-shadow: 0 1px 1px #000;
47             }
48         </style>
49         <div data-role="page" class="page" id="home">
50             <!--主頁模板-->
51             <div class="ui-toast"></div>
52             <div class="ui-mask"></div>
53             <div class="ui-sheet"></div>
54             <div id="head-bar">
55                 <div class="head-bar">
56                     <div class="head-logo">
57                         <img src="image/index/logo.png" />
58                     </div>
59                     <div class="head-location">
60                         <a href="" style="font-size: 0.28rem;">北京站<span class="down"></span></a>
61                     </div>
62                     <div class="head-bar-right">
63                         <a href="" class="index-person showMenu"></a>
64                     </div>
65                 </div>
66                 <div class="head-bar-fix"></div>
67             </div>
68             <div class="main">
69                  //主頁代碼
70             </div>
71         </div>
72         <!-- /page -->
73         <!--page end-->
74         <div id="menu" class="menu">
75             //側滑菜單
76         </div>
77 
78     </body>
79 
80 </html>        

 

由於我當時的項目是有一個側滑菜單,因此有一個menu的div,其實正常狀況下都是在main這個div裏邊寫代碼的,上邊的head-bar就是頭部條,基本就是這樣。ios

對於fastclick這個插件主要是解決在iOS系統中點擊有300毫秒延遲的這個問題咱們引入fastclick以後加入代碼:css3

1 if ('addEventListener' in document) {  
2     document.addEventListener('DOMContentLoaded', function() {  
3         FastClick.attach(document.body);  
4     }, false);  
5 }  

若是引入了jquery的話咱們還能夠簡化:web

1 $(function() {  
2     FastClick.attach(document.body);  
3 });  

對於swiper這個插件,你們很熟悉,主要是在移動端用的比較多,由於在swiper3裏邊沒有作對於IE的兼容,若是你作的是PC端,那仍是推薦你用swiper2,或者是islide,fullPage等插件吧。

swiper很強大,這裏很少說,想了解的人能夠查看這個的文檔。我作的HTML5的特效動畫都是經過這個作的。很簡單,很炫。

dropload.js主要是上拉加載和下拉刷新,這個插件我也是剛弄會,用的還行吧,基本實現比較簡單,在移動端不會出現什麼問題,其實你也能夠本身寫下拉加載,可是效果可能沒有這個好。

要用這個你必須得會ajax請求,這個是一個比較簡單的東西,就很少說了。代碼在此:

  1     var num = 10;
  2     var page1 = 1;
  3     var page2 = 1;
  4     var page3 = 1;
  5     // dropload
  6     var dropload = $('body').dropload({
  7         scrollArea: window,
  8         //滑動最小距離
  9         distance: 50,
 10          //提早加載距離
 11         threshold: 200,
 12         domDown : {
 13             domClass   : 'dropload-down',
 14             // 滑動到底部顯示內容
 15             domRefresh : '<div class="dropload-refresh">↑上拉加載更多-商品信息</div>',
 16             // 內容加載過程當中顯示內容
 17             domLoad    : '<div class="dropload-load"><span class="loading"></span>立刻就好...</div>',
 18             // 沒有更多內容-顯示提示
 19             domNoData  : '<div class="dropload-noData">沒有更多內容了</div>'
 20         },
 21         //上拉加載
 22         loadDownFn: function(me) {
 23 //            me.unlock();
 24             // 加載菜單一的數據
 25             if(itemIndex == '0') {
 26                 $.ajax({
 27                     type: 'GET',
 28                     url: 'http://192.168.2.181:8081/m.ygou/json.php?action=all&page=' + page1,
 29                     dataType: 'json',
 30                     success: function(data) {
 31                         var result = '';
 32                         //頁碼加1
 33                         page1++;                                            
 34                         for(var i = 0; i < data.lists.length; i++) {
 35                             result += '<li>' +
 36                                 '<a class="catalog-item goods" href="comment/detail.php?itemid=' + data.lists[i].itemid + ' ">' +
 37                                 '<div class="goods-image">' + '<img src=" ' + data.lists[i].thumb + ' "/>' + '</div>' +
 38                                 '<div class="info">' +
 39                                 '<p class="goods-title">' + data.lists[i].title + '</p>' +
 40                                 '<div class="goods-common">' +
 41                                 '<div class="goods-progress">' +
 42                                 '<p>' + "參與進度:" + '<span id="join_progress">' + data.lists[i].jindu + '</span>' + '</p>' +
 43                                 '<div class="goods-progress-box">' + '<div class="goods-progress-slide" style="width: ' + data.lists[i].jindu + '">' +
 44                                 '</div>' + '</div>' +
 45                                 '</div>' +
 46                                 '<a href="comment/detail.php?itemid=' + data.lists[i].itemid + ' " class="join-btn">' + '<img src="img/index/lijicanyu.png"/>' + '</a>' + '</div>' +
 47                                 '</div>' +
 48                                 '</a>' +
 49                                 '</li>';
 50 
 51                         }
 52 
 53                         $('.lists ul').eq(itemIndex).append(result);
 54                         //判斷是否加載完了
 55                         if(data.lists.length < num) {
 56                             // 數據加載完
 57                             tab1LoadEnd = true;
 58                             // 鎖定上拉下拉操做
 59                             me.lock();
 60                             // 無數據
 61                             me.noData();
 62                             $('.dropload-down').css("margin-bottom","0rem");
 63 //                            break;
 64                         }
 65                         // 每次數據加載完,必須重置
 66                         me.resetload();
 67 
 68                     },
 69                     error: function(xhr, type) {
 70                         alert('加載失敗請重試!');
 71                         // 即便加載出錯,也得重置
 72                         me.resetload();
 73                     }
 74                 });
 75                 // 加載菜單二的數據
 76             } else if(itemIndex == '1') {
 77                 $.ajax({
 78                     type: 'GET',
 79                     url: 'http://192.168.2.181:8081/m.ygou/json.php?action=jindu&page=' + page2,
 80                     dataType: 'json',
 81                     success: function(data) {
 82                         page2++;
 83                         var result = '';                        
 84                         for(var j = 0; j < data.setbacks.length; j++) {
 85                             result += '<li>' +
 86                                 '<a class="catalog-item goods" href="comment/detail.php?itemid=' + data.setbacks[j].itemid + ' ">' +
 87                                 '<div class="goods-image">' + '<img src=" ' + data.setbacks[j].thumb + ' "/>' + '</div>' +
 88                                 '<div class="info">' +
 89                                 '<p class="goods-title">' + data.setbacks[j].title + '</p>' +
 90                                 '<div class="goods-common">' +
 91                                 '<div class="goods-progress">' +
 92                                 '<p>' + "參與進度:" + '<span id="join_progress">' + data.setbacks[j].jindu + '</span>' + '</p>' +
 93                                 '<div class="goods-progress-box">' + '<div class="goods-progress-slide" style="width: ' + data.setbacks[j].jindu + '">' +
 94                                 '</div>' + '</div>' +
 95                                 '</div>' +
 96                                 '<a href="comment/detail.php?itemid=' + data.setbacks[j].itemid + ' " class="join-btn">' + '<img src="img/index/lijicanyu.png"/>' + '</a>' + '</div>' +
 97                                 '</div>' +
 98                                 '</a>' +
 99                                 '</li>';
100                             
101                         }
102                         $('.lists ul').eq(itemIndex).append(result);
103                         //若是當前頁返回的數據少於每頁的最大值則
104                         if(data.setbacks.length < num) {
105                             // 數據加載完
106                             tab2LoadEnd = true;
107                             // 鎖定
108                             me.lock();
109                             // 無數據
110                             me.noData();
111                             $('.dropload-down').css("margin-bottom","0rem");
112 //                            break;
113                         }
114                         // 每次數據加載完,必須重置
115                         me.resetload();
116 
117                     },
118                     error: function(xhr, type) {
119                         alert('加載失敗請重試!');
120                         // 即便加載出錯,也得重置
121                         me.resetload();
122                     }
123                 });
124             } else if(itemIndex == '2') {
125                 $.ajax({
126                     type: 'GET',
127                     url: 'http://192.168.2.181:8081/m.ygou/json.php?action=renci&page=' + page3,
128                     dataType: 'json',
129                     success: function(data) {
130                         page3++;
131                         var result = '';                        
132                         for(var k = 0; k < data.numdata.length; k++) {
133                             result += '<li>' +
134                                 '<a class="catalog-item goods" href="comment/detail.php?itemid=' + data.numdata[k].itemid + ' ">' +
135                                 '<div class="goods-image">' + '<img src=" ' + data.numdata[k].thumb + ' "/>' + '</div>' +
136                                 '<div class="info">' +
137                                 '<p class="goods-title">' + data.numdata[k].title + '</p>' +
138                                 '<div class="goods-common">' +
139                                 '<div class="goods-progress">' +
140                                 '<p>' + "參與進度:" + '<span id="join_progress">' + data.numdata[k].jindu + '</span>' + '</p>' +
141                                 '<div class="goods-progress-box">' + '<div class="goods-progress-slide" style="width: ' + data.numdata[k].jindu + '">' +
142                                 '</div>' + '</div>' +
143                                 '</div>' +
144                                 '<a href="comment/detail.php?itemid=' + data.numdata[k].itemid + ' " class="join-btn">' + '<img src="img/index/lijicanyu.png"/>' + '</a>' + '</div>' +
145                                 '</div>' +
146                                 '</a>' +
147                                 '</li>';
148                             
149                         }
150                         $('.lists ul').eq(itemIndex).append(result);
151                         if(data.numdata.length == 0) {
152                                 // 數據加載完
153                                 tab3LoadEnd = true;
154                                 // 鎖定
155                                 me.lock();
156                                 // 無數據
157                                 me.noData();
158                                 $('.dropload-down').css("margin-bottom","0rem");
159 //                                break;
160                             }
161                         // 每次數據加載完,必須重置
162                         me.resetload();
163 
164                     },
165                     error: function(xhr, type) {
166                         alert('加載失敗請重試!');
167                         // 即便加載出錯,也得重置
168                         me.resetload();
169                     }
170                 });
171             }
172         }
173     });

相信看完代碼的人確定會有一個具體的瞭解。

而後說一些常規的東西吧,在移動端點擊會出現淺色背景,這個怎麼解決?

咱們能夠添加這個樣式:

.xxx {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }

還有一些其餘注意的地方相似:

 1 /*消除transition閃屏*/
 2 .css {
 3     -webkit-transform-style: preserve-3d;
 4     -webkit-backface-visibility: hidden;
 5 }
 6 * {
 7     padding: 0;
 8     margin: 0;
 9     max-width: 640px;
10     -webkit-tap-highlight-color:rgba(255,255,255,0);
11     -webkit-text-size-adjust:none;
12     -webkit-touch-callout:none;  /*系統默認菜單被禁用*/   
13     -webkit-user-select:none; /*webkit瀏覽器*/   
14     -khtml-user-select:none; /*早期瀏覽器*/   
15     -moz-user-select:none;/*火狐*/   
16     -ms-user-select:none; /*IE10*/   
17     user-select:none;
18     /*border: 1px solid red;*/
19 }
20 
21 img {
22     border: none;
23 }
24 
25 ul,
26 ol,
27 li {
28     list-style: none;
29     font-size: 18px;
30 }
31 
32 a {
33     text-decoration: none;
34 }
35 
36 body {
37     font-family: Helvetica;
38     background: #EEEEEE;
39     max-width: 640px;
40 }
41 
42 input{
43     outline: none;
44     -webkit-appearance:none; /*去除input默認樣式*/
45     -webkit-user-select:auto; /*webkit瀏覽器*/ 
46 }

下面是我網上找的一些地方須要注意:

web移動端開發技巧與注意事項彙總
1、meta的使用

一、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

  強制讓文檔的寬度與設備的寬度保持1:1,而且文檔最大的寬度比例是1.0,且不容許用戶點擊屏幕放大瀏覽

二、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉:
  <meta name="msapplication-tap-highlight" content="no">

三、忽略頁面的數字爲電話,忽略email識別
  <meta name="format-detection" content="telephone=no, email=no"/>

2、針對適配等比縮放的方法:

@media only screen and (min-width: 1024px){
  body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
  body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
  body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
  body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
  body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
  body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
  body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
  body{zoom:1.125;}
}

或如:

@media all and (orientation : landscape) {

  h2{color:red;}/*橫屏時字體紅色*/

}

@media all and (orientation : portrait){

  h2{color:green;}/*豎屏時字體綠色*/

}

3、佈局

1.佈局使用百分比:

  不一樣的手機有着不一樣的分辨率,這時再用咱們pc端佈局經常使用的px就不合適了。使用百分比佈局要時時刻刻清楚其父元素,由於子元素的百分比高度是根據父元素的高度來肯定的,當父元素的高度爲不肯定值時,或者說父元素的高度未定義時,子元素的高度百分比將沒有用(沒有參照物)。因此只有設置了父元素的高度,子元素的高度百分比才會有用。

2.em與rem:
  em是根據相對單位,不是固定的,他會繼承父級元素的字體大小,若沒有父級則em的相對基準點爲瀏覽器的字體大小,瀏覽器的字體默認爲16px,所以若無父級元素,相對於瀏覽器大小:Xem=X*16px;
rem是css3新增屬性,是徹底相對於HTML根元素大小設定的,默認爲10px,所以不管父級字體大小,1rem=10px。

3.柵格佈局:
  box-sizing:border-box;能夠改變盒子模型的計算方式方便你設置寬進行自適應流式佈局。

四、wap頁面有img標籤,記得加上display:block;屬性來解決img的邊緣空白間隙的1px像素。若是圖片要適應不一樣的手機要設置width:100%;並且不能添加高度。

五、有關Flexbox彈性盒子佈局一些屬性
  一、不定寬高的水平垂直居中
  .xxx{
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    -webkit-transform:translate(-50%,-50%);
    border-radius:6px;
    background:#fff;
  }
  二、[flexbox版]不定寬高的水平垂直居中
  .xx{
    justify-content:center;//子元素水平居中,
    align-items:center;//子元素垂直居中;
    display:-webkit-flex;
  }

4、文本的處理

一、關閉iOS鍵盤首字母自動大寫
<input type="text" autocapitalize="off" />
二、//單行文本溢出

  .xx{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
三、//多行文本溢出
  .xx{
    display:-webkit-box !importmort;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;(數字2表示隱藏兩行)
  }

四、html {
  -webkit-text-size-adjust: 100%;
  }

5、圖片、媒體的處理

一、//使用流體圖片
  img{
    width:100%;
    height:auto;
    width:auto\9;
  }

二、audio元素和video元素在ios和andriod中沒法自動播放
  應對方案:觸屏即播
  $('html').one('touchstart',function(){
    audio.play()
  })

三、如何禁止保存或拷貝圖像
  一般當你在手機或者pad上長按圖像 img ,會彈出選項 存儲圖像 或者 拷貝圖像,若是你不想讓用戶這麼操做,那麼你能夠經過如下方法來禁止:
  img {
    -webkit-touch-callout: none;
  }
  PS:須要注意的是,該方法只在 iOS 上有效。

6、陰影的處理

  一、 移動端如何清除輸入框內陰影
    在iOS上,輸入框默認有內部陰影,但沒法使用 box-shadow 來清除,若是不須要陰影,能夠這樣關閉:
    input,textarea {
      border: 0;
      -webkit-appearance: none;
    }

7、字體的處理

  對於網站字體設置
  一、移動端項目:
  font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
  二、移動和pc端項目:
  font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

  三、字體大小盡可能使用pt或者em,rem,代替px。

  四、設置input裏面placeholder字體的大小 ::-webkit-input-placeholder{ font-size:10pt;}

  五、解決字體在移動端比例縮小後出現鋸齒的問題:-webkit-font-smoothing: antialiased;

8、圓角設置

  放一個圖片或者一個按鈕,設置圓角會比較美觀,設置圓角的值能夠用百分比,也能夠用em等單位。 

  element{
    border: 1px solid #ccc;
    -moz-border-radius: 百分比;
    -webkit-border-radius: 百分比;
    border-radius: 百分比;
  }

9、邊距凹陷

一、像素邊框(例子:移動端列表的下邊框)
  .list-iteam:after{
    position: absolute;
    left: 0px;
    right: 0px;
    content: '';
    height: 1px;
    transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    -webkit-transform:scaleY(0.5);
  }

二、  

  與在pc端開發同樣,開發過程當中須要的一個很須要注意的問題的邊距塌陷,典型的問題是margin-top的嵌套,對子元素設置margin-top值,子元素相對於父元素的位置沒有變,而父元素跟着子元素一塊兒向下移動響應的距離。其原理可參考本人以前的筆記css之BFC學習筆記,解決方案:

1.給父元素div1設置一個padding值

  .div1{
    height: 500px;
    width: 100%;
    background: #ccc;
    padding-top: 1px;
  }

2.給父元素div1設置一個overflow:hidden;在不加overflow:Hidden;的時候,margin-top:這個屬性是認不到邊的,也就是失效。可是ie瀏覽器解決了這個問題,火狐、谷歌之類的就會出現失效,因此這是個標準問題,也是個兼容問題。

 .div1{

  height: 500px;
  width: 100%;
  background: #ccc;
  overflow: hidden;
  }

10、禁止內容

一、//禁止文本縮放
html {
-webkit-text-size-adjust: 100%;
}

二、移動端禁止選中內容
若是你不想用戶能夠選中頁面中的內容,那麼你能夠在css中禁掉:
  .user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
   }
  兼容IE6-9的寫法:onselectstart="return false;" unselectable="on"

11、滾動效果

 

12、快速回彈

  快速回彈滾動
  .xxx {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  PS:iScroll用過以後感受不是很好,有一些詭異的bug,這裏推薦另一個 iDangero Swiper,這個插件集成了滑屏滾動的強大功能(支持3D),並且還有回彈滾動的內置滾動條,官方地址:
  http://www.idangero.us/sliders/swiper/index.php

十3、白色背景顏色搭配

 

十4、經常使用的移動端開發框架以及工具

框架
1. 移動端基礎框架
  zepto.js 語法與jquery幾乎同樣,會jquery基本會zepto~
  iscroll.js 解決頁面不支持彈性滾動,不支持fixed引發的問題~ 實現下拉刷新,滑屏,縮放等功能~
  underscore.js 該庫提供了一整套函數式編程的實用功能,可是沒有擴展任何JavaScript內置對象。
  fastclick 加快移動端點擊響應時間
  animate.css CSS3動畫效果庫
  Normalize.css Normalize.css是一種現代的、CSS reset爲HTML5準備的優質替代方案
2. 滑屏框架
  適合上下滑屏、左右滑屏等滑屏切換頁面的效果
  slip.js
  iSlider.js
  fullpage.js
  swiper
3.瀑布流框架
  masonry
工具推薦
  caniuse 各瀏覽器支持html5屬性查詢
  paletton 調色搭配

十5、動畫的處理

開啓硬件加速
解決頁面閃白
保證動畫流暢
.css {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
設計高性能CSS3動畫的幾個要素
儘量地使用合成屬性transform和opacity來設計CSS3動畫,
不使用position的left和top來定位
利用translate3D開啓GPU加速

十6、消除閃爍

   消除transition閃屏
  .css{

    -webkit-transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
  }

十7、移動端取消touch高亮效果  在作移動端頁面時,會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素,默認都會在激活狀態時,顯示高亮框,若是不想要這個高亮,那麼你能夠經過css如下方法來禁止:  .xxx {    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  }

相關文章
相關標籤/搜索