平時在移動端開發拼頁面的過程中總會遇到一些問題，主要是各手機webview樣式顯示效果不一致造成的。以下總結了一些常見坑和一些小技巧，希望對看官有所幫助！
本文只針對兩大手機陣營 Android和IOS 中的魅藍metal 和 iPhone6進行樣式對比。
一、line-height
line-height經常用於文字居中，當然也有小夥伴會用上下padding去寫.but！不管你用padding還是line-height，不同手機顯示效果還是…不一樣。
一般會這樣寫
1 2 3 4 5 6 | .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，兩個平臺顯示都還不錯。
二、多行省略
一般我們的產品列表樣式，會有標題行數的限制。
怎麼實現呢？
|
1
2
3
4
5
6
7
8
9
|
.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值大一些，行與行的間距變大，容器高度的設定需要多測試一些機型，控制文字不多出也不被擋住。
三、角標的實現
不少項目ui會要求我們畫這種梯形角標。問題來了
1.我們不確定角標內容的長度
2.角標的底色不能定死，能定死（能定死的話直接切個小體形就行了）
通常就是一段文案後邊拼接一個三角形，三角形很好寫
1 2 3 4 5 6 | .script { width: 0; height: 0; //控制寬高爲0，用border寬度撐出一個三角形 border-right: 10px solid transparent; border-top: 15px solid #c59c53; } |
我看到的第一種寫法是把三角形直接拼在前邊的文案後邊，當然這在iphone上是沒有問題的。但在部分安卓機型上卻會有1像素的間隙，就像這樣：
我現在感受到安卓陣營深深的惡意
原因可能是定位在各安卓手機上會有不同的效果。。好像大家都是猴子，長的卻都不一樣。
對此有個好的解決方案：
|
1
2
3
4
|
<p
class="rongqi">
<span
class="wenan">跟團遊</span>
<span
class="script"></span>
</p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .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就可以看的更明白：
四、圖文標題
一些常見的佈局例如圖+文案的，有多種方式可以去寫，比如padding-left+background或者position+padding-left或者before僞元素。
前兩種方法都可以把圖片做到絕對的垂直居中，但是它們都是相對整行的容器進行定位的，由於line-height兼容問題的坑，圖片實際上不一定會和文字對齊。如果有圖文對齊的需求的話，個人建議才用before僞元素來佈局，before可以相對文案來定位。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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去寫，所以寫樣式一定要根據不同情況去選擇合適的方式。
五、左右寬度自適應
第四個小技巧結尾，圖中的佈局實際上是分左右兩塊的，依照ui的需求，文案是要左對齊，數字是要右對齊的。你可能最先想到的是把右側的數字定位或者浮動到那，左側的容器加上個margin-right或者padding-right。這樣可以實現，但是兩側的文案有極端情況出現。
效果可能是這樣的：
也可能是這樣的
因爲你根本不知道兩側文案的長度到底是多少。
我的方案是用box佈局，左側的容器設置box-flex:1，右側不管它：
1 2 3 4 5 | <li class="ent-li"> <img class="ent-img" src="img/1.png"> <div class="left">主題門票</div> <div class="right">10</div> </li> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.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覺得數字更重要，所以讓文案去自適應，數字有多長就多長
六、display:inline-block
衆所周知，元素有3種基本顯示框類型，block塊級，inline-block行內塊級，inline行內。
inline-block是一種特殊存在，可以設置寬高也可以使元素在一行排列。
我在開發中會遇到以下兩種佈局：
這兩種佈局都可以用float:left來寫，但是浮動完了還需要清楚浮動。所以可以直接把元素設置成inline-block同樣可以自動排列
1 2 3 4 5 6 | .rongqi{//每塊容器 display: inline-block;//設置行內塊級 width: 25%; //設置寬度爲1/4 font-size: 12px; text-align: center; } |
這裏會有個小坑，就是行內元素在水平和垂直排列的時候會有間距。造成這種結果
左邊是默認情況下的效果，右側是改進後的效果，左邊第二行和第一行中間有段莫名的間距，這並不是我們真正想要的。
解決的辦法很簡單：
|
1
2
3
|
.father{
font-size:0;//父容器字體大小設置成0，具體的字體大小應用在文案上
}
|
七、模擬滾動
模擬滾動也是在項目中遇到的常見佈局。佈局要求彈層出來後，彈層中的內容可以滾動，彈層背後的列表不能隨彈層滾動而滾動。並且在彈層上滑動的時候，整個頁面也不能隨之滾動。
直接上代碼：
1 2 3 4 5 6 7 8 9 10 11 | <section class="father"> <section class="content-body"> <!--頁面內容、蒙層、蒙層中的內容互爲兄弟節點，防止點擊時頁面穿透--> </section> <section class="layout"> <!--頁面內容、蒙層、蒙層中的內容互爲兄弟節點，防止點擊時頁面穿透--> </section> <section class="layout-body"> <!--頁面內容、蒙層、蒙層中的內容互爲兄弟節點，防止點擊時頁面穿透--> </section> </section> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
.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;
}
|
當我們觸發蒙層彈出時控制樣式
|
1
2
3
4
5
6
7
8
|
.father{
height:
533px;
overflow-y:
hidden;//設置超出隱藏，那麼頁面不會觸發滾動
}
.content-body{
height:
533px;
overflow-y:
hidden;//設置超出隱藏，那麼頁面不會觸發滾動
}
|
這個方法雖然實現了頁面模擬滾動的效果，但是當蒙層彈出的時候設置了overflow:hidden會導致頁面scrollTop變成0，頁面相當於被滾到頂部了。如果UI或者PM不願意，請與他們撕逼。
轉自：http://web.jobbole.com/87481/
