css - 在同一类声明中两次使用 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;
}