display:flex 向下兼容写法

2017-01-06 10:58:26 +08:00
 hoythan

安卓机上的口碑 APP 内嵌网页完全不支持 flex 写法,甚至 display:box 也不支持,只能改为 display:block.

那么在 css 上应该如何写兼容写法?

我写了

dislpay:block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

没用...

写下面又会导致都变成 Block 了,巨麻烦

1593 次点击
所在节点    问与答
4 条回复
newbieooOO
2017-01-06 11:23:53 +08:00
你需要 Modernizr 和 Autoperfixer
murmur
2017-01-06 11:26:44 +08:00
display:-webkit-box;

display: -webkit-flex;

display: flex;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1;

-webkit-flex-flow: row;

flex-flow: row;

线上我们用的这个版本 4.2 是可以支持的 安卓 4 以下就没试
murmur
2017-01-06 11:27:35 +08:00
内嵌页面就老实用流式布局 你还想嵌出一个 app ?纯贴图都够了
hoythan
2017-01-06 12:56:38 +08:00
@newbieooOO Autoperfixer 不能用.


@murmur 也不行.

内嵌的是 UC1.0 版 浏览器 解决办法就是不用 Autoperfixer 自己写成以下格式:

display: -webkit-box;
dislpay:block;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

然后里面的用 float 替代.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/332626

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX