可以安全地使用flexbox进行小型（移动）媒体查询？ [英] Safe to use flexbox for small (mobile) media query?

问题描述

对于我的响应网站，我需要支持IE9，这意味着我不能使用felxbox。但是，我的手机在500px处有一个断点。在此媒体查询中使用flexbox安全吗？手机浏览器支持似乎不错。

这是一个新网站，所以我没有任何现有的分析数据来做出这个决定。

解决方案

在任何断点处使用Flexbox是安全的，支持的浏览器，只要您使用 all 必要的旧前缀，请做。 Android&不支持 flexBox 的iPhone浏览器基本上没有了。* 颇有）在2014年有FlexBox支持，并被，这个市场份额比老款Windows手机上的IE9要高。可能是一个垂死的品种，至此，IE 9 Mobile现在只占到了0.29％的比例移动市场。然而，如果您的网站迎合亚洲或非洲大陆或Opera Mini的东欧地区，或者仍然需要瞄准IE8或IE9用户，那么使用Flexbox布局的表格后备解决方案仍然相当重要。

从技术上讲，您可以使用Flexbox与IE8-9兼容的回退功能，使用表 + table cel / row 。这取决于你的上下文，以及哪些Flexbox功能正在使用...如果你不使用flexwrap或重新排序，一个表后备应该适当地工作在IE8上-9，甚至在手机上。

以下是制作网站在IE8 +，Opera 11和Opera Mini（Presto）中使用 flexBox + 表 fallbacks。 Opera Mini给出了一个相当糟糕的布局，但至少它是移动兼容的。

更新：Opera Mini服务器现在支持Opera Presto 2.12级别的Flexbox。 >

For my responsive site I need to support IE9 meaning that I cant use felxbox yet. However ive got a breakpoint at 500px targeting phones. Is it safe to use flexbox within this media query? The mobile browser support seems good.

This is a new site so I dont have any existing analytics data to make this decision with.

解决方案

It's safe to use Flexbox at any breakpoint with supported browsers, as long as you use all the necessary old prefixes, please do. Android & iPhone browsers that don't support flexBox are essentially dead.*

*Except that Opera Mini doesn't (quite yet) have FlexBox support in 2014, and is used by 250 million users, which is a higher market share than IE9 on older Windows Phones 7. Probably a dying breed at this point, IE 9 Mobile now only account for 0.29% of the mobile market. However having a table fallback solution to a Flexbox layout is still rather important, especially if your site cater to the Asian or African continents or Eastern Europe for Opera Mini, or if still need to target IE8 or IE9 users.

Know that technically you can use Flexbox with a IE8-9 compatibility fallback using table + table cel/row. It depends on your context, and as to which Flexbox features are being used... If you don't use flexWrap nor reordering, a table fallback should work reasonably well on IE8-9, even on mobile.

Here is an example production site I did using flexBox + table fallbacks, working in IE8+, Opera 11 and Opera Mini (Presto). Opera Mini gives a rather crappy layout, but at least it's mobile compatible.

Update: Opera Mini servers now support Flexbox at Opera Presto 2.12 levels which is unprefixed.

这篇关于可以安全地使用flexbox进行小型（移动）媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！