web-dev-qa-db-ja.com

CSS3メディアクエリ-画面ではなくコンテナーの幅？

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

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

jquerycssmedia-queries
31
2ne

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

7
Jeff Schram

あなたが求めているものとは異なる何かが欲しいと思います。

メディアクエリは、アニメーションやその他の視覚的なことを行うのではなく、使用するデバイス（メディア）に固有の何かをクエリすることを目的としています。

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

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

移行する要素とオプションを宣言します。これは例です。ここで、widthまたはmarginの変更要素は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/

1
SimonSimCity

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

サイドバーが開くと、コンテンツが右に圧縮され、コンテンツセンター内にあります。もちろん、中央揃えのコンテンツがなくてもこれを行うことができ、意図したとおりに機能します。

1
Ryan King