移動端樣式小技巧

平時在移動端開發拼頁面的過程當中總會遇到一些問題，主要是各手機webview樣式顯示效果不一致形成的。如下總結了一些常見坑和一些小技巧，但願對看官有所幫助！

本文只針對兩大手機陣營 Android和IOS 中的魅藍metal 和 iPhone6進行樣式對比。

1、line-height

line-height常常用於文字居中，固然也有小夥伴會用上下padding去寫.but！無論你用padding仍是line-height，不一樣手機顯示效果仍是...不同。

通常會這樣寫

.demo{
    height:16px;
    line-height:14px;
    font-size:9px;
    border:1px solid #ff6815;
}

嗯，在咱們的chrome因爲字體小於9px已經看不出邊框和字之間的間隙了，再來看看Android和IOS的

魅藍文字已經飛起~
ios正常顯示

若是把line-height加1px，iPhone文字就會下移，因爲咱們app的ios用戶居多，而且android機型太多，不一樣機型也會顯示不一樣，因此只能退而求其次了。

line-height的兼容問題不太好解決，容器高度越小，顯示效果的差距越明顯。稍微大一點的高度，最好把line-height設置爲高度+1px，兩個平臺顯示都還不錯。

---

2、多行省略

通常咱們的產品列表樣式，會有標題行數的限制。

怎麼實現呢？

.demo{
    display: -webkit-box;    //1.設置display類型爲-webkit-box
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;        //2.設置元素超出隱藏
    text-overflow: ellipsis; //3.設置超出樣式爲省略號
    -webkit-line-clamp: 2;   //4.設置2行應用省略
    -webkit-box-orient: vertical;
}

這樣設置還要考慮一個極端的狀況，就是標題不足兩行。具體要看PM的需求，一是空出第二行的距離，二是讓標題下邊的元素頂上去。若是是第一種需求，有2種解決的方案。
1：把下邊的元素都使用position:absoulte定位到固定的位置，不受標題行數影響。
2：把標題容器的高度寫死，這樣寫必需要考慮行高的坑，由於容器高度寫死之後，不一樣機型行高實際上顯示效果不同。

高度寫少了，有的機型會這樣。

寫多了可能會這樣。

個人作法是，不影響佈局的狀況下儘可能控制line-height值大一些，行與行的間距變大，容器高度的設定須要多測試一些機型，控制文字很少出也不被擋住。

---

3、角標的實現

很多項目ui會要求咱們畫這種梯形角標。問題來了

1.咱們不肯定角標內容的長度
2.角標的底色不能定死，能定死（能定死的話直接切個小體形就好了）

一般就是一段文案後邊拼接一個三角形，三角形很好寫

.script {
    width: 0;
    height: 0;        //控制寬高爲0，用border寬度撐出一個三角形
    border-right: 10px solid transparent;
    border-top: 15px solid #c59c53;
}

我看到的第一種寫法是把三角形直接拼在前邊的文案後邊，固然這在iphone上是沒有問題的。但在部分安卓機型上卻會有1像素的間隙，就像這樣：

我如今感覺到安卓陣營深深的惡意

緣由多是定位在各安卓手機上會有不一樣的效果。。好像你們都是猴子，長的卻都不同。

對此有個好的解決方案：

<p class="rongqi">
    <span class="wenan">跟團遊</span>
    <span class="script"></span>
</p>

.rongqi {//容器
    height: 15px;
    overflow: hidden;//設置超出隱藏
    position: absolute;
    top: 0;
    left: 0;
}
.wenan{//文案
    float: left;
    position: relative;    //設置相對定位
    z-index: 3;            //設置層級不被三角形擋住
    height: 15px;
    padding-left: 4px;
    line-height: 16px;
    color: #fff;
    font-size: 10px;
}
.script {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 30px solid #c59c53;    //這裏的30px實際上遠遠超出容器的高度
    float: right;                      //就是爲了高度超出被擋住作出梯形的效果，兼容各類機型
    margin-left: -9px;
}

若是去除容器的overflow:hidden就能夠看的更明白：

---

4、圖文標題

一些常見的佈局例如圖+文案的，有多種方式能夠去寫，好比padding-left+background或者position+padding-left或者before僞元素。
前兩種方法均可以把圖片作到絕對的垂直居中，可是它們都是相對整行的容器進行定位的，因爲line-height兼容問題的坑，圖片實際上不必定會和文字對齊。若是有圖文對齊的需求的話，我的建議才用before僞元素來佈局，before能夠相對文案來定位。

p{
    height:44px;
    line-height:45px;
    padding-left:40px;
}
p::before{
    content: '';
    display: inline-block;
    background: url("../img/xxx.png") center center no-repeat;
    background-size: contain;    //這裏把背景圖片尺寸設置成contain，不須要考慮圖片拉伸的問題
    width: 14px;
    height: 18px;
    margin: 0 5px -4px 0;
}

還有一種狀況，咱們的圖文佈局，是從數組中遍歷出來的，相似下圖：

這種狀況更適合position去寫，因此寫樣式必定要根據不一樣狀況去選擇合適的方式。

---

5、左右寬度自適應

第四個小技巧結尾，圖中的佈局其實是分左右兩塊的，依照ui的需求，文案是要左對齊，數字是要右對齊的。你可能最早想到的是把右側的數字定位或者浮動到那，左側的容器加上個margin-right或者padding-right。這樣能夠實現，可是兩側的文案有極端狀況出現。

效果多是這樣的：

也多是這樣的

由於你根本不知道兩側文案的長度究竟是多少。
個人方案是用box佈局，左側的容器設置box-flex:1，右側無論它：

<li class="ent-li">
    <img class="ent-img" src="img/1.png">
    <div class="left">主題門票</div>
    <div class="right">10</div>
</li>

.ent-li {
    margin-left: 45px;
    height: 44px;
    display: -webkit-box; //box佈局並作好兼容
    display: box;
    position: relative;
}
.ent-li .left {
    -webkit-box-flex: 1; //box-flex:1控制寬度自適應
    box-flex: 1;
    text-align: left;
    line-height: 45px;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ent-li .right {    //右側啥都不用管
    text-align: right;
    line-height: 45px;
    font-size: 12px;
    color: #999;
    padding-left: 10px;
}

讓咱們看看最終極端條件下的顯示效果：

或者：

由於pm以爲數字更重要，因此讓文案去自適應，數字有多長就多長

---

6、display:inline-block

衆所周知，元素有3種基本顯示框類型，block塊級，inline-block行內塊級，inline行內。
inline-block是一種特殊存在，能夠設置寬高也可使元素在一行排列。

如下圖片信息來自同程旅遊app

我在開發中會遇到如下兩種佈局：

這兩種佈局均可以用float:left來寫，可是浮動完了還須要清楚浮動。因此能夠直接把元素設置成inline-block一樣能夠自動排列

.rongqi{//每塊容器
    display: inline-block;//設置行內塊級
    width: 25%;           //設置寬度爲1/4
    font-size: 12px;
    text-align: center;
}

這裏會有個小坑，就是行內元素在水平和垂直排列的時候會有間距。形成這種結果

左邊是默認狀況下的效果，右側是改進後的效果，左邊第二行和第一行中間有段莫名的間距，這並非咱們真正想要的。
解決的辦法很簡單：

.father{
    font-size:0;//父容器字體大小設置成0，具體的字體大小應用在文案上
}

---

7、模擬滾動

如下圖片信息來自同程旅遊app

模擬滾動也是在項目中遇到的常見佈局。佈局要求彈層出來後，彈層中的內容能夠滾動，彈層背後的列表不能隨彈層滾動而滾動。而且在彈層上滑動的時候，整個頁面也不能隨之滾動。
直接上代碼：

<section class="father">
    <section class="content-body">
    <!--頁面內容、蒙層、蒙層中的內容互爲兄弟節點，防止點擊時頁面穿透-->
    </section>
    <section class="layout">
    <!--頁面內容、蒙層、蒙層中的內容互爲兄弟節點，防止點擊時頁面穿透-->
    </section>
    <section class="layout-body">
    <!--頁面內容、蒙層、蒙層中的內容互爲兄弟節點，防止點擊時頁面穿透-->
    </section>
</section>

.father{
    height: 533px;
    overflow-y: scroll;//頁面高度設置爲屏幕高度，正常狀況下超出滾動
}
.content-body{
    height: 533px;
    overflow-y: scroll;//內容高度設置爲屏幕高度，正常狀況下超出滾動
}
.layout{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000000;
}
.layout-body{
    height: 46%;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    z-index: 1000001;
}

當咱們觸發蒙層彈出時控制樣式

.father{
    height: 533px;
    overflow-y: hidden;//設置超出隱藏，那麼頁面不會觸發滾動
}
.content-body{
    height: 533px;
    overflow-y: hidden;//設置超出隱藏，那麼頁面不會觸發滾動
}

這個方法雖然實現了頁面模擬滾動的效果，可是當蒙層彈出的時候設置了overflow:hidden會致使頁面scrollTop變成0，頁面至關於被滾到頂部了。若是UI或者PM不肯意，請與他們撕逼。