E企盈营销工具技术服务商 热线:4006-838-530

小程序在iphone6中的flex布局兼容性

E企盈直播平台营销卖货系统

项目上线后,被体验用户截图了。样式完全爆炸。 我当时也差点原地爆炸了。因为在测试开发阶段,没有看到这样的情况出现。一时间有点慌张,哈哈哈哈,其实 还好。仔细发现,就会察觉到是flex布局的兼容性问题了,在日常开发中,我似乎没有养成这样需要display:-webkit-flex;这样多书写一行代码的习惯,因为觉得现在大多数人的手机不应该那么老。现在开来,做开发还是需要多照顾那些在2019年还用iphone6手机的用户。(哈哈哈);在这里总结下兼容性写法:父容器模块display:flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content: space-between;align-items:center;-webkit-align-items: center; /*父元素-横向换行 */  -webkit-flex-wrap: wrap;  -moz-flex-wrap: wrap;  -ms-flex-wrap: wrap;  -o-flex-wrap: wrap;  flex-wrap:wrap; 子容器模块/*子元素-垂直居中(在侧轴、纵轴上)*/【新版本语法】 -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;/* 子元素—平分比例 */  -prefix-box-flex: 1; /* old spec webkit, moz */ -webkit-box-flex: 1;      /* OLD – iOS 6-, Safari 3.1-6 */ -webkit-flex: 1;          /* Chrome */ -moz-box-flex: 1;         /* Firefox 19- */ -ms-flex: 1;              /* IE 10 */ width:20%; flex: 1;                  /* NEW,  Opera 12.1, Firefox 20+ */ flex: 2;

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序在iphone6中的flex布局兼容性
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏