flex兼容ios（iphone6）
2020-03-04 本文已影响0人
wdapp
开发过程使用flex简直不要太6，但是如果只是写新版本的语法形式，是肯定存在兼容性问题的（安卓机基本没啥问题，主要是ios）
一、问题
flex布局分为旧版本dispaly: box；过渡版本dispaly: flex box；以及现在的标准版本display: flex；
Android
2.3 开始就支持旧版本display:-webkit-box;
4.4 开始支持标准版本display: flex;
IOS
6.1 开始支持旧版本display:-webkit-box;
7.1 开始支持标准版本display: flex;
PC
ie10开始支持，但是IE10的是-ms形式的
二、解决
注意：把旧语法写在底下（ps：css向下兼容），否则无效
盒子写法
display:-webkit-flex; /* 新版本语法: Chrome 21+ */
display:flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display:-webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display:-moz-box; /* 老版本语法: Firefox (buggy) */
display:-ms-flexbox; /* 混合版本语法: IE 10 */
子元素写法
-webkit-flex:1; /* Chrome */
-ms-flex:1; /* IE 10 */
flex:1; /* NEW, Spec - Opera 12.1, Firefox 20+ *
/-webkit-box-flex:1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex:1; /* OLD - Firefox 19- */
例子（兼容iphone 6）
image
