在同一 class 声明中两次使用 CSS 属性

Question

我已阅读 Defining CSS properties twice 但它涵盖了我正在查看的代码。

我现在明白 vmin 在做什么，但我不明白这段代码是如何工作的。什么时候按钮的高度是 200px，什么时候是从 vmin 中获取的值。声明一个属性两次到底是什么意思？

  .centerButton {
    height: 200px;
    width: 200px;
    height: 50vmin;
    width: 50vmin;
}

谢谢

我正在查看 https://airhorner.com/ 的源代码以供参考。

Answer 1

当您编写这样的代码时，像素值将成为旧浏览器的后备值。

例如Edge 16 会将语句解释为：

.centerButton {
    height: 50vmin;
    width: 50vmin;
}

但 Internet Explorer 9 将以像素为单位设置样式（IE9 使用 vm-单位代替 vmin）：

.centerButton {
    height: 200px;
    width: 200px;
}

当您不小心颠倒顺序时，像素值会覆盖 vmin：

.centerButton {
    height: 50vmin;
    width: 50vmin;
    /* this replaces previous values */
    height: 200px;
    width: 200px;
}

Using a CSS attribute twice in the same class decleration