html - CSS 响应变量

Question

我有一列元素彼此相邻。

要在元素之间创建间隙，嗯，使用 margin 属性。

现在我正在尝试添加响应式样式。

对于宽度为 320px 的设备，我使用边距:3.20px

对于宽度为 420px 的设备，我使用边距:4.20px

对于宽度为 520px 的设备，我使用边距:5.20px

等等……

有没有办法以更优雅的方式应用这些命令？

通常我会去

@media all and (min-width: 320px) {
.Column {margin: 3.20px}

@media all and (min-width: 420px) {
.Column {margin: 4.20px !important}

@media all and (min-width: 520px) {
.Column {margin: 5.20px !important}

@media all and (min-width: 620px) {
.Column {margin: 6.20px !important}

等等……

有没有更优雅的解决方案？

Answer 1

您可以利用 css 变量(又名 CustomProperties)使其发挥作用。css 属性现在得到广泛支持(除了 IE11，你仍然可以有一个 polyfill 来帮助你)。阅读有关 cssVars 的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

/* demo */

* {
  box-sizing: border-box;
}

.column {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
}


/* real code */

@media all and (min-width: 320px) {
  .column {
    margin: var(--column-margin, 3.20px);
  }
}

@media all and (min-width: 420px) {
  .column {
    --column-margin: 4.20px;
  }
}

@media all and (min-width: 520px) {
  .column {
    --column-margin: 5.20px;
  }
}

@media all and (min-width: 620px) {
  .column {
    --column-margin: 6.20px;
  }
}

<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>