摘要：平時(shí)在移動(dòng)端開發(fā)拼頁(yè)面的過(guò)程中總會(huì)遇到一些問(wèn)題，主要是各手機(jī)樣式顯示效果不一致造成的。五左右寬度自適應(yīng)第四個(gè)小技巧結(jié)尾，圖中的布局實(shí)際上是分左右兩塊的，依照的需求，文案是要左對(duì)齊，數(shù)字是要右對(duì)齊的。

本文只針對(duì)兩大手機(jī)陣營(yíng) Android和IOS 中的魅藍(lán)metal 和 iPhone6進(jìn)行樣式對(duì)比。

line-height經(jīng)常用于文字居中，當(dāng)然也有小伙伴會(huì)用上下padding去寫.but！不管你用padding還是line-height，不同手機(jī)顯示效果還是...不一樣。

一般會(huì)這樣寫

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

嗯，在我們的chrome由于字體小于9px已經(jīng)看不出邊框和字之間的間隙了，再來(lái)看看Android和IOS的

魅藍(lán)文字已經(jīng)飛起~
ios正常顯示

如果把line-height加1px，iPhone文字就會(huì)下移，由于我們app的ios用戶居多，并且android機(jī)型太多，不同機(jī)型也會(huì)顯示不同，所以只能退而求其次了。

line-height的兼容問(wèn)題不太好解決，容器高度越小，顯示效果的差距越明顯。稍微大一點(diǎn)的高度，最好把line-height設(shè)置為高度+1px，兩個(gè)平臺(tái)顯示都還不錯(cuò)。

一般我們的產(chǎn)品列表樣式，會(huì)有標(biāo)題行數(shù)的限制。

怎么實(shí)現(xiàn)呢？

.demo{
    display: -webkit-box;    //1.設(shè)置display類型為-webkit-box
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;        //2.設(shè)置元素超出隱藏
    text-overflow: ellipsis; //3.設(shè)置超出樣式為省略號(hào)
    -webkit-line-clamp: 2;   //4.設(shè)置2行應(yīng)用省略
    -webkit-box-orient: vertical;
}

這樣設(shè)置還要考慮一個(gè)極端的情況，就是標(biāo)題不足兩行。具體要看PM的需求，一是空出第二行的距離，二是讓標(biāo)題下邊的元素頂上去。如果是第一種需求，有2種解決的方案。
1：把下邊的元素都使用position:absoulte定位到固定的位置，不受標(biāo)題行數(shù)影響。
2：把標(biāo)題容器的高度寫死，這樣寫必須要考慮行高的坑，因?yàn)槿萜鞲叨葘懰酪院?，不同機(jī)型行高實(shí)際上顯示效果不一樣。

高度寫少了，有的機(jī)型會(huì)這樣。

寫多了可能會(huì)這樣。

我的做法是，不影響布局的情況下盡量控制line-height值大一些，行與行的間距變大，容器高度的設(shè)定需要多測(cè)試一些機(jī)型，控制文字不多出也不被擋住。

不少項(xiàng)目ui會(huì)要求我們畫這種梯形角標(biāo)。問(wèn)題來(lái)了

1.我們不確定角標(biāo)內(nèi)容的長(zhǎng)度
2.角標(biāo)的底色不能定死，能定死（能定死的話直接切個(gè)小體形就行了）

通常就是一段文案后邊拼接一個(gè)三角形，三角形很好寫

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

我看到的第一種寫法是把三角形直接拼在前邊的文案后邊，當(dāng)然這在iphone上是沒(méi)有問(wèn)題的。但在部分安卓機(jī)型上卻會(huì)有1像素的間隙，就像這樣：

我現(xiàn)在感受到安卓陣營(yíng)深深的惡意

原因可能是定位在各安卓手機(jī)上會(huì)有不同的效果。。好像大家都是猴子，長(zhǎng)的卻都不一樣。

對(duì)此有個(gè)好的解決方案：

    跟團(tuán)游
    

.rongqi {//容器
    height: 15px;
    overflow: hidden;//設(shè)置超出隱藏
    position: absolute;
    top: 0;
    left: 0;
}
.wenan{//文案
    float: left;
    position: relative;    //設(shè)置相對(duì)定位
    z-index: 3;            //設(shè)置層級(jí)不被三角形擋住
    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實(shí)際上遠(yuǎn)遠(yuǎn)超出容器的高度
    float: right;                      //就是為了高度超出被擋住做出梯形的效果，兼容各種機(jī)型
    margin-left: -9px;
}

如果去除容器的overflow:hidden就可以看的更明白：

一些常見(jiàn)的布局例如圖+文案的，有多種方式可以去寫，比如padding-left+background或者position+padding-left或者before偽元素。
前兩種方法都可以把圖片做到絕對(duì)的垂直居中，但是它們都是相對(duì)整行的容器進(jìn)行定位的，由于line-height兼容問(wèn)題的坑，圖片實(shí)際上不一定會(huì)和文字對(duì)齊。如果有圖文對(duì)齊的需求的話，個(gè)人建議才用before偽元素來(lái)布局，before可以相對(duì)文案來(lái)定位。

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;    //這里把背景圖片尺寸設(shè)置成contain，不需要考慮圖片拉伸的問(wèn)題
    width: 14px;
    height: 18px;
    margin: 0 5px -4px 0;
}

還有一種情況，我們的圖文布局，是從數(shù)組中遍歷出來(lái)的，類似下圖：

這種情況更適合position去寫，所以寫樣式一定要根據(jù)不同情況去選擇合適的方式。

第四個(gè)小技巧結(jié)尾，圖中的布局實(shí)際上是分左右兩塊的，依照ui的需求，文案是要左對(duì)齊，數(shù)字是要右對(duì)齊的。你可能最先想到的是把右側(cè)的數(shù)字定位或者浮動(dòng)到那，左側(cè)的容器加上個(gè)margin-right或者padding-right。這樣可以實(shí)現(xiàn)，但是兩側(cè)的文案有極端情況出現(xiàn)。

效果可能是這樣的：

也可能是這樣的

因?yàn)槟愀静恢纼蓚?cè)文案的長(zhǎng)度到底是多少。
我的方案是用box布局，左側(cè)的容器設(shè)置box-flex:1，右側(cè)不管它：

    
    
主題門票
    
10

.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控制寬度自適應(yīng)
    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 {    //右側(cè)啥都不用管
    text-align: right;
    line-height: 45px;
    font-size: 12px;
    color: #999;
    padding-left: 10px;
}

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

或者：

因?yàn)閜m覺(jué)得數(shù)字更重要，所以讓文案去自適應(yīng)，數(shù)字有多長(zhǎng)就多長(zhǎng)

眾所周知，元素有3種基本顯示框類型，block塊級(jí)，inline-block行內(nèi)塊級(jí)，inline行內(nèi)。
inline-block是一種特殊存在，可以設(shè)置寬高也可以使元素在一行排列。

以下圖片信息來(lái)自同程旅游app

我在開發(fā)中會(huì)遇到以下兩種布局：

這兩種布局都可以用float:left來(lái)寫，但是浮動(dòng)完了還需要清楚浮動(dòng)。所以可以直接把元素設(shè)置成inline-block同樣可以自動(dòng)排列

.rongqi{//每塊容器
    display: inline-block;//設(shè)置行內(nèi)塊級(jí)
    width: 25%;           //設(shè)置寬度為1/4
    font-size: 12px;
    text-align: center;
}

這里會(huì)有個(gè)小坑，就是行內(nèi)元素在水平和垂直排列的時(shí)候會(huì)有間距。造成這種結(jié)果

左邊是默認(rèn)情況下的效果，右側(cè)是改進(jìn)后的效果，左邊第二行和第一行中間有段莫名的間距，這并不是我們真正想要的。
解決的辦法很簡(jiǎn)單：

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

以下圖片信息來(lái)自同程旅游app

模擬滾動(dòng)也是在項(xiàng)目中遇到的常見(jiàn)布局。布局要求彈層出來(lái)后，彈層中的內(nèi)容可以滾動(dòng)，彈層背后的列表不能隨彈層滾動(dòng)而滾動(dòng)。并且在彈層上滑動(dòng)的時(shí)候，整個(gè)頁(yè)面也不能隨之滾動(dòng)。
直接上代碼：

.father{
    height: 533px;
    overflow-y: scroll;//頁(yè)面高度設(shè)置為屏幕高度，正常情況下超出滾動(dòng)
}
.content-body{
    height: 533px;
    overflow-y: scroll;//內(nèi)容高度設(shè)置為屏幕高度，正常情況下超出滾動(dòng)
}
.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;
}

當(dāng)我們觸發(fā)蒙層彈出時(shí)控制樣式

.father{
    height: 533px;
    overflow-y: hidden;//設(shè)置超出隱藏，那么頁(yè)面不會(huì)觸發(fā)滾動(dòng)
}
.content-body{
    height: 533px;
    overflow-y: hidden;//設(shè)置超出隱藏，那么頁(yè)面不會(huì)觸發(fā)滾動(dòng)
}

這個(gè)方法雖然實(shí)現(xiàn)了頁(yè)面模擬滾動(dòng)的效果，但是當(dāng)蒙層彈出的時(shí)候設(shè)置了overflow:hidden會(huì)導(dǎo)致頁(yè)面scrollTop變成0，頁(yè)面相當(dāng)于被滾到頂部了。如果UI或者PM不愿意，請(qǐng)與他們撕逼。