vmax 单元在 IE 中不起作用答案

【问题标题】：vmax unit not working in IEvmax 单元在 IE 中不起作用
【发布时间】：2015-03-04 01:58:20
【问题描述】：

我正在尝试将 vmax 与 flex 一起使用，但它在 IE 中不起作用，甚至在 ie11 中也不起作用

css

.container{ border:1px solid red; display:flex; }
.container div{border:1px solid green;flex: 0 0 48vmax;}

html

<div class="container">
   <div>a</div>
   <div>b </div>
</div>

提前致谢

【问题讨论】：

任何理由不使用flex: 2; jsfiddle.net/vhjepz2x/2
一个项目需要它，这是为什么？我第一次遇到这个问题
buggyfill.js 可用于使用 vmax 单元 @web-tiki

标签： html css internet-explorer flexbox

【解决方案1】：

该问题与使用 flexbox 无关。如果您检查canIuse，您会看到 IE 仅部分支持视口单位，您可以阅读：

所有其他部分支持是指不支持“vmax”单位。

IE 还不支持vmax 单位。

【讨论】：

参考 - developer.mozilla.org/en-US/docs/Web/CSS/…
所以似乎甚至没有计划在下一版本的 IE 中支持 vmax :( 蹩脚！
@VitorinoFernandes canIuse 和 MDN 都对 vmax 单位和 IE 说了同样的话
@VitorinoFernandes 我们可以使用 buggyfill.js 在 IE 和 mozilla 中使用 vmax
我说的是同一个网站 buggyfill.js ！ @web-tiki

【解决方案2】：

我认为您可以通过在 CSS 中添加 媒体查询 来绕过 vmax 支持问题。由于 vmax 等于 vw 和 vh 之间的最大值，因此您只需要像这样使用这两个单位：

@media (orientation: landscape) { 
   .container div{border:1px solid green;flex: 0 0 48vw;} 
}

@media (orientation: portrait) {
    .container div{border:1px solid green;flex: 0 0 48vh;}
}

你可以看到我用过：

vw 用于横向，因为在横向中，视口宽度高于其高度。

vh 用于纵向，因为在纵向时，视口高度高于其宽度。

【讨论】：

这对我有用！ Vmax 在横向的情况下为 vw，在纵向的情况下为 vh！

【解决方案3】：

在ie中只用vm代替vmax。

【讨论】：