第一次正式接觸移動(dòng)端的開(kāi)發(fā)，感覺(jué)還是學(xué)到一些東西的，因?yàn)橹岸际亲约簛y七八糟的寫(xiě)一點(diǎn)，今天進(jìn)行稍微規(guī)范點(diǎn)的總結(jié)一下，還有，還有，就是對(duì)于寫(xiě)代碼的態(tài)度，一定要比較認(rèn)真，不懂的一定要得出一個(gè)結(jié)論弄懂。

1: 對(duì)于背景圖片問(wèn)題

• 通常對(duì)于并不是要求特別精準(zhǔn)精細(xì)的設(shè)計(jì)，一般使用background:url(bground.png);一般設(shè)置背景圖，但是背景圖并不會(huì)自動(dòng)撐開(kāi)空間，所以需要設(shè)置寬度和高度，寬度可能使用百分比，對(duì)于高度，一般按照iphone6里面的高度寫(xiě)死。與之搭配的幾個(gè)屬性包括：

     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;(還包括cover，是鋪滿整個(gè)區(qū)域)
     background-image: url(/common/images/play@3x.png);
     background-color: transparent;

還有剛接觸的一點(diǎn)是，背景圖可以在一個(gè)里面設(shè)置多層：

background-color: rgba(0, 0, 0, .3);
    background-image: url(/common/images/theme-frame@3x.png);
    background-size: 88%;
    background-position: center;
    background-repeat: no-repeat;

background-color和background-image可以一起使用，來(lái)形成漂浮在上面的蒙罩。

• 也可以使用img標(biāo)簽進(jìn)行引入，這樣必須是圖片比例固定的，一般在要求比較精準(zhǔn)的地方使用。

2: 消除鏈接、圖片等一點(diǎn)擊出現(xiàn)藍(lán)色陰影的問(wèn)題

 div,a,img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select:none;
}

3: 對(duì)于一些文字比較多，要設(shè)置顯示 ...
自己剛開(kāi)始的第一反應(yīng)是使用js，但js有很多問(wèn)題，比如加載比較慢，會(huì)出現(xiàn)閃跳等問(wèn)題，原來(lái)這個(gè)是使用css進(jìn)行解決呀。 上代碼

.descirbe{
  text-overflow: ellipsis; //設(shè)置省略號(hào)
  overflow: hidden;  //  設(shè)置超出的部分進(jìn)行隱藏
  -webkit-line-clamp: 1; // 設(shè)置顯示的行數(shù)為1，若超出一行則隱藏
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

ps：對(duì)于移動(dòng)端的開(kāi)發(fā)，能使用css的，就盡量不要使用js，因?yàn)閖s是異步加載，會(huì)比較慢，或者在html的下面直接寫(xiě)js代碼，也會(huì)快一點(diǎn)。

4: 想記錄一個(gè)背景漸變的屬性 backgound:linear-gradient：

.set-item-mask {
   position: absolute;
   height: 50px;
   width: 100%;
   margin-top: 140px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
 }

5: 對(duì)于鏈接跳轉(zhuǎn)的，一般都使用a標(biāo)簽，然后display：block啥的進(jìn)行樣式的調(diào)整，不要使用button啥的用js控制。

6: 對(duì)于視頻劇集，可以進(jìn)行橫向滑動(dòng)。
效果：

屏幕快照 2017-06-22 下午5.54.59.png

直接使用css就可以搞定了。

.serial-item-wrap.serial-episode-list {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch;
    text-align: justify; 
    &::-webkit-scrollbar {
        display: none;
    }

    .serial-item {
      margin-bottom: 0;
    }
  }