1

我已经非常熟练地使用媒体查询来动态更改 DOM 元素。但是，据我所知，这些只能检测窗口/设备的宽度/高度，而不是单个 DOM 元素。我希望能够制作一个 CSS 来根据元素的大小重新排列和调整元素的内容。例如：

╒══════════════════════════════╕
│Browser Window                │
├──────────────────────────────┤
│ ┌──────────────────────────┐ │
│ │.resizingParent           │ │
│ │┌──────┐ Some caption text│ │
│ ││ IMG  │ directly relating│ │
│ ││      │ to the image.    │ │
│ │└──────┘                  │ │
│ └──────────────────────────┘ │
│                              │
└──────────────────────────────┘
╒══════════════════════════════╕
│Browser Window                │
├──────────────────────────────┤
│ ┌───────────────┐            │
│ │.resizingParent│            │
│ │┌─────────────┐│            │
│ ││             ││            │
│ ││  I  M  G    ││            │
│ ││             ││            │
│ ││             ││            │
│ │└─────────────┘│            │
│ │Some caption   │            │
│ │directly       │            │
│ │relating to the│            │
│ │image.         │            │
│ └───────────────┘            │
│                              │
└──────────────────────────────┘

我希望解决方案像使用媒体查询一样简单，例如下面的（无效）代码：

<STYLE>
.resizingParent>IMG {
    display: inline-block;
    width: 25%;
}

.resizingParent(max-width:10em)>IMG {
    display: block;
    width: 100%;
}
</STYLE>

<DIV CLASS=".resizingParent">
    .resizingParent
    <IMG SRC="IMG.png" ALT="IMG"/>
    Some caption text directly relating to the image
</DIV>
4

1 回答 1

1

不幸的是，媒体查询不是这样工作的。CSS 中有许多自然响应的选项（即，它们不需要在视口改变大小时重新格式化媒体查询），具体取决于您需要完成的工作类型。对于您的特定问题，Flexbox 是最合适的。

http://codepen.io/cimmanon/pen/Azone

figure {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 1px solid;
}
@supports (flex-wrap: wrap) {
  figure {
    display: flex;
  }
}

figure div {
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  margin: 1em;
  text-align: center;
}

figure figcaption {
  margin: 1em;
  -webkit-flex: 10 1 20em;
  -ms-flex: 10 1 20em;
  flex: 10 1 20em;
}

的HTML：

<figure>
  <div><!-- this div is mostly here to prevent our image from getting distorted -->
    <img src="http://placehold.it/200x200" />
  </div>

  <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio. Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus. Phasellus velit enim, tempus et lobortis eget, rhoncus nec dolor.</figcaption>
</figure>

因为我们需要我们的 flex 项目来换行，所以浏览器支持目前仅限于 Chrome、Opera 和 IE10。 http://caniuse.com/#feat=flexbox

于 2013-03-13T19:57:54.623 回答