31

ここでこの質問をまだ見たことがありませんが、幅に基づいたコンテナまたは親要素に基づいてメディアクエリを作成できるかどうかを誰かが知っているかどうか疑問に思っていました. これのユーザー ケースは、左からポップアップしてメイン ウィンドウ コンテナーのサイズを縮小するメニューがある場合です。これは、メニュー ポップが開いていることを確認できる Web サイトの例ですが、新しい幅に基づいてページのコンテンツを変更することはできません。

http://tympanus.net/Tutorials/FullscreenBookBlock/

4

3 に答える 3

7

私もこれを調べてきました。これまでのところ、Andy Hume のアプローチに感銘を受けましたhttp://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/

于 2013-07-01T15:56:21.770 に答える
1

求めているものとは違うものを求めていると思います。

メディア クエリは、使用するデバイス (メディア) に固有の何かをクエリするためのものであり、アニメーションやその他の視覚的なものを行うためのものではありません。

ここに投稿した例を再構築するのはかなり簡単ですが、(応答性を除いて) メディアクエリとは何の関係もありません。

彼らは、2 つの状態を持つ通常のページを作成しました。一方の状態ではコンテンツのみが表示され、もう一方の状態ではメニューが表示され、コンテンツの一部が (メニューの幅で) 画面の外に移動されます。

どの要素とどのオプションが遷移的であるべきかを宣言します。要素の幅またはマージンを変更すると、3秒かかるアニメーションが開始されるように構成する例を次に示します。

div {
  transition: width 3s, margin 3s;
  -moz-transition: width 3s, margin 3s;
  -webkit-transition: width 3s, margin 3s;
  -o-transition: width 3s, margin 3s;
}

これら 2 つの状態の切り替えは、css-class を追加することによって行われ、表示されるアニメーションはtransitionと呼ばれる CSS3 設定によって構成されます。

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitionsのようなものを読むことをお勧めします

参考までに: 概念の証明として、あなたが示した Web サイトのようなものを再構築します: http://jsfiddle.net/W3PF4/

于 2013-01-23T13:41:32.193 に答える
1

いいえ、そのようにメディアクエリを実行することはできませんが、求めていることは css で実行できます。私は自分のウェブサイトのためにそれをやっていて、サイトポイントの人たちはかなり助けてくれました - ここの投稿11を見てください: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p= 5061986&viewfull=1#post5061986

サイドバーが開くと、コンテンツが右側に押しつぶされ、その中にコンテンツ センターが表示されます。もちろん、コンテンツをセンタリングせずにこれを行うこともでき、意図したとおりに機能します。

于 2013-01-23T13:42:00.563 に答える