flex布局問題
- ios8.0 不支持flex-wrap屬性
如果有需要折行的flex配置需要改成width：xx%的方式
- ios8.0 flex兼容性
需要子元素變成display:inline-block
ios8.0兼容性.png
ios8.0兼容性2.png
- ios8.0 flex均等分問題
需要子元素增加 width:100%
flex非均等分.jpg
flex均等分2.jpg
- 安卓手機(jī)上
核心原因： 分辨率不同，安卓手機(jī)底部普遍含有虛擬導(dǎo)航欄
解決辦法： 外框flex布局五芝，flex：1可以自動計算出不含虛擬導(dǎo)航欄的高度
安卓圖形被覆蓋.jpg
- css3在安卓手機(jī)上表現(xiàn)跟ios不一致
圖片替代或者跟設(shè)計溝通龟劲，減少此類設(shè)計
error1.png
- 手機(jī)端 click 事件會有大約 300ms 的延遲
解決方案fastclick
- 基于rem響應(yīng)式布局诅病，chrome字體最小限制12px
解決方案： 設(shè)置font-size：625% => 1rem = 100px
- 針對retainer屏幕1px效果
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
- button、link按壓仿原生背景變色
div:active{
background-color:rgb(0,0,0,0.3)
}
- 基于rem響應(yīng)式布局
(function(win, doc, dw) {
var docEl = doc.documentElement,
dw = dw || 640,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var docElWidth = docEl.clientWidth;
(docElWidth > 640) && (docElWidth = 640);
if (!docElWidth) return;
docEl.style.fontSize = docElWidth / (640 / 100) + 'px'; //基于640px設(shè)計稿
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document, 640)
