html - 我们可以根据div宽度添加媒体吗？

Question

div {
  display: inline-block;
  padding: 30px;
  color: sienna;
  background: ivory;
  border: 1px solid goldenrod;
  overflow: auto;
  resize: horizontal;
}

@element '.div1' and (min-width: 300px) {
  .div1 {
    background: gold;
  }
}

@element '.div1' and (min-width: 600px) {
  .div1 {
    background: red;
  }
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js'></script>
<div class="div1">Click and drag until larger than 300px ➷</div>

它在 Dot Net 中不起作用。它仅适用于 HTML 页面。一个问题是媒体查询可以根据 div 元素而不是屏幕调整大小吗？

Answer 1

在普通的 CSS 中:你想要的是不可能的，但你不需要它。你已经有了答案。使用 css 媒体查询，但只定义需要更改特定宽度限制的类。如下图。

div {
  display: inline-block;
  padding: 30px;
  color: sienna;
  background: ivory;
  border: 1px solid goldenrod;
  overflow: auto;
  resize: horizontal;
}

@media and (min-width: 300px) {
  .div1 {
    background: gold;
  }
}

@media and (min-width: 600px) {
  .div1 {
    background: red;
  }
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js'></script>
<div class="div1">Click and drag until larger than 300px ➷</div>

但是，如果您查看 documentation of EQCSS,你可以做到这一点

@element .minwidthpixels and (min-width: 500px) {
  .minwidthpixels {
    background: gold;
  }
}

所以代码是:

div {
  display: inline-block;
  padding: 30px;
  color: sienna;
  background: ivory;
  border: 1px solid goldenrod;
  overflow: auto;
  resize: horizontal;
}

@element .div1 and (min-width: 300px) {
  .div1 {
    background: gold;
  }
}

@element .div1 and (min-width: 600px) {
  .div1 {
    background: red;
  }
}