摘要:平時在移動端開發拼頁面的過程中總會遇到一些問題,主要是各手機樣式顯示效果不一致造成的。五左右寬度自適應第四個小技巧結尾,圖中的布局實際上是分左右兩塊的,依照的需求,文案是要左對齊,數字是要右對齊的。
平時在移動端開發拼頁面的過程中總會遇到一些問題,主要是各手機webview樣式顯示效果不一致造成的。以下總結了一些常見坑和一些小技巧,希望對看官有所幫助!
一、line-height本文只針對兩大手機陣營 Android和IOS 中的魅藍metal 和 iPhone6進行樣式對比。
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,兩個平臺顯示都還不錯。
一般我們的產品列表樣式,會有標題行數的限制。
怎么實現呢?
.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.角標的底色不能定死,能定死(能定死的話直接切個小體形就行了)
通常就是一段文案后邊拼接一個三角形,三角形很好寫
.script { width: 0; height: 0; //控制寬高為0,用border寬度撐出一個三角形 border-right: 10px solid transparent; border-top: 15px solid #c59c53; }
我看到的第一種寫法是把三角形直接拼在前邊的文案后邊,當然這在iphone上是沒有問題的。但在部分安卓機型上卻會有1像素的間隙,就像這樣:
我現在感受到安卓陣營深深的惡意
原因可能是定位在各安卓手機上會有不同的效果。。好像大家都是猴子,長的卻都不一樣。
對此有個好的解決方案:
跟團游
.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可以相對文案來定位。
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,右側不管它:
.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; }
讓我們看看最終極端條件下的顯示效果:
或者:
六、display:inline-block因為pm覺得數字更重要,所以讓文案去自適應,數字有多長就多長
眾所周知,元素有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,具體的字體大小應用在文案上 }七、模擬滾動
以下圖片信息來自同程旅游app
模擬滾動也是在項目中遇到的常見布局。布局要求彈層出來后,彈層中的內容可以滾動,彈層背后的列表不能隨彈層滾動而滾動。并且在彈層上滑動的時候,整個頁面也不能隨之滾動。
直接上代碼:
.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不愿意,請與他們撕逼。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111419.html
摘要:在正式前端一些小細節前端掘金英文原文,翻譯未來的太讓人興奮了一方面,是全新的頁面布局方式另一方面,是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務:有趣的鼠標懸浮模糊效果,參考:http://ife.baidu.com/course/d...,用CSS3實現了一下,順便...
摘要:原生越來越好了,如果是簡單的頁面,沒必要引入一個龐大的,尤其在手機端,對速度流量敏感的地方,另外最好自己簡單封裝一些常用的函數,比如等。。。這時候它就不知所措了,只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識 1.You Might Not Need jQuery 不用jQuery,原生js如何實現,可以參考這里:You Might Not Need jQuery 。原生js...
摘要:原生越來越好了,如果是簡單的頁面,沒必要引入一個龐大的,尤其在手機端,對速度流量敏感的地方,另外最好自己簡單封裝一些常用的函數,比如等。。。這時候它就不知所措了,只好待在中間。參考前端界有哪些越早知道越好的小技巧小知識 1.You Might Not Need jQuery 不用jQuery,原生js如何實現,可以參考這里:You Might Not Need jQuery 。原生js...
閱讀 2574·2021-11-18 10:02
閱讀 1713·2021-09-30 10:00
閱讀 5310·2021-09-22 15:27
閱讀 1204·2019-08-30 15:54
閱讀 3671·2019-08-29 11:13
閱讀 2945·2019-08-29 11:05
閱讀 3319·2019-08-29 11:01
閱讀 569·2019-08-26 13:52