本文旨在總結(jié)上周開發(fā)的小功能版塊中遇到的幾個問題诬烹。
1.在使用flexbox布局時遇到的問題族沃。
在使用flexbox的時候出現(xiàn)了一個奇怪的問題元镀，就是容器中左邊的圖片設(shè)定了固定的寬高露泊，依舊會發(fā)生變形。（并且這個問題只出現(xiàn)在動態(tài)取數(shù)據(jù)的情況下乖阵，靜態(tài)頁面不存在此問題）如圖一所示：
經(jīng)過分析發(fā)現(xiàn)原因在于：根據(jù)實(shí)際取到的標(biāo)題文字?jǐn)?shù)目不同會撐開塊并將左邊的圖片擠壓而導(dǎo)致形變宣赔。
解決方案一：之前是左邊定寬，右邊自適應(yīng)瞪浸，現(xiàn)在改為將左右用百分比表示寬度儒将。
解決方案二：由于使用了flexbox布局，可以設(shè)置flex-shrink:0对蒲，當(dāng)空間不足時該項(xiàng)不會縮小钩蚊。或者使用flex-basis屬性蹈矮，設(shè)置項(xiàng)目占據(jù)的主軸空間砰逻。
總結(jié)：在使用flexbox布局時和平常做左部定寬右部自適應(yīng)的布局時有小小的不一樣，就是不能只設(shè)置寬度泛鸟，要用flex-basis專門設(shè)置項(xiàng)目占據(jù)的主軸空間蝠咆。（ps:對基本知識運(yùn)用不夠靈活，掌握不夠嫻熟）
2.圖片大小不一北滥，處理問題刚操。
根據(jù)實(shí)際情況，每條新聞的封面圖片都是大小再芋，長寬比例不一的菊霜，但都要放在相同大小的塊中展示，如何保證它們看起來不變形祝闻，效果良好的展示占卧。
這個問題棘手在已有的數(shù)據(jù)中圖片都是大小不一的遗菠，最終用以下兩種方法只能緩解联喘，如果有人有更好的辦法歡迎評論，多謝~：
方案一：使用背景圖片展示辙纬，將圖片設(shè)置為固定大小的div塊的背景豁遭，然后設(shè)置background-position:center，這樣可以將圖片中間的主要內(nèi)容展現(xiàn)出來贺拣，但缺點(diǎn)是遇到一些像素很高的圖片只會展示中間一小部分蓖谢。
方案二：將塊固定長寬 overflow:hidden捂蕴，然后圖片寬度width:100%，margin-top:-15px（這個偏移可以根據(jù)實(shí)際情況而定）闪幽。前后對比如圖二啥辨，三所示。當(dāng)然這個也只能解決大部分情況盯腌，不能解決所有情況溉知。
3.超出省略問題
之前經(jīng)常用到的是單行文本超出省略，這次是兩行文本超出需要省略腕够。
單行解決方案：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
兩行解決方案：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
4.文字顯示不全問題
一開始在pc端用谷歌瀏覽器模擬調(diào)試都沒有問題级乍，但在手機(jī)上運(yùn)行后出現(xiàn)文字顯示不全的問題，如圖四帚湘。
使用rem設(shè)置了塊的高度和字體玫荣，但rem是相對于根元素去計算字體大小的，并不是所有的設(shè)備上根元素的大小都是相同的大诸，由于這些誤差導(dǎo)致在一些手機(jī)瀏覽器上出現(xiàn)文字超出顯示不全捅厂。
原因：因?yàn)镃hrome設(shè)置了最小字號為12px，導(dǎo)致如果在寬高底挫、行高恒傻、邊距等地方用rem，雖然在html那設(shè)置了10px建邓，但默認(rèn)還是會按照12px來計算盈厘，所以實(shí)際會偏大。建議rem只是在字號上用比較好官边。
解決方案：首先設(shè)置根元素的字體大小沸手。其次將寬高的單位改為px（還是rem使用的不當(dāng)）;
html{ font-size:10px} ?.title{ font-size:2rem;}
以上是這次開發(fā)中遇到的幾個布局問題，有一些雖然暫時解決了注簿，但希望還可以找到更好的方案和解釋契吉。歡迎大家指正！
相關(guān)鏈接：flexbox布局? ?文本溢出顯示省略??關(guān)于rem的bug問題
