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>

フレックス アイテムをラップする必要があるため、現在、ブラウザーのサポートは Chrome、Opera、および IE10 に限定されています。 http://caniuse.com/#feat=flexbox

于 2013-03-13T19:57:54.623 に答える