CSS：如何在 IE9 中使用 vmin 单元？

Question

我有这段代码

.image.medium {
    width:10vmin;
    height:10vmin;
}

.image.small {
    width:6vmin;
    height:6vmin;
}

.image.medium.as_big {
    margin:5vmin;
}

.image.small.as_big {
    margin:7vmin;
}

你可以看到它包含那些“vmin”单位，这些单位在 IE9 上没有用，因为它使用“vm”。

我的电脑里没有 IE 喜欢检查，反正它是一台 linux 电脑，所以我不知道如何让这个 css 可以同时被 IE9 和其他浏览器使用。

我也在想，我应该改用 javascript 解决方法吗？我只想要vmin，根据http://caniuse.com/#feat=viewport-units 这么多浏览器都不支持，我希望能够缩放。

Answer 1

通常，标准声明应放在非标准/实验性功能之后。

例如，在这种特殊情况下，它应该是：

.image.medium {
    width: 10vm;   /* fallback for IE9 */
    width: 10vmin;

    height: 10vm;  /* fallback for IE9 */
    height: 10vmin;
}

后一种声明由支持vmin 的现代网络浏览器解释。前一个声明作为后一个声明的后备。

---

跨浏览器解决方案

还有用于视口相对长度的 polyfill，例如：

• vminpoly by Sebastian Ferreyra — CSS 单元的 polyfill vw、vh 和 vmin。
• Prefixfree - Viewport Relative Units Plugin by Lea Verou — polyfill 代表 vw、vh 和 vmin。
• Viewport Units Buggyfill by Rodney Rehm — 用于移动 Safari 的视口 vh、vw vmin、vmax 的 polyfill。
• Is there any cross-browser javascript for making vh and vw units work