html - vmax 单元在 IE 中不工作

Question

我正在尝试将 vmax 与 flex 结合使用，但它在 IE 中无法正常工作，甚至在 ie11 中也无法正常工作

here is the DEMO link

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>

提前致谢

Answer 1

我认为您可以通过在您的 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 用于横向，因为在横向中，视口(viewport)宽度高于其高度。

vh 用于纵向，因为在纵向中，视口(viewport)高度高于其宽度。