子要素のCSS属性を親要素のサイズに依存させる（メディアのクエリはブラウザの幅に依存する）

Question

ブラウザウィンドウの幅に依存するフォーム構造を持っている：質問を簡略化するため、3つのレベル（最大の場合から始まる）を仮定する：

左側の

1. フィールドラベル、
2. フィールドラベル上の入力フィールドの下に中心とフィールドの説明で中心とフィールドの説明右
3. フィールドラベルの左側に、入力フィールドに入力フィールド、中段の入力フィールドと下段のフィールドの説明

それは、このような何かによって行われています：

@media (max-width:1000px) { /* code for 1. */ } 
@media (max-width:900px) { /* code for 2. */ } 
@media (max-width:800px) { /* code for 3. */ } 

私は何のために求めていることは、私は1000px幅を持っているdivにformを入れたときに、すべての要素に同じ機能を得ることです、CSS第1のレイアウト（max-width:1000px）をスタイルするために使用される同じプロパティformに適用されます。このdivが800pxに縮小されると、1000pxにまだ設定されているブラウズウィンドウがある場合でも、formは3番目のレイアウトに自動的に再レイアウトされます。

可能ですか？

Answer 1

おかげで、私は完璧な解決策を見つけた：

https://github.com/marcj/css-element-queries

まだ若いプロジェクトですが、まだにはいくつかの脆弱性がありますities（2013年7月29日）でも可能性があります。 @elementクエリに基づくものではなく、attributesに基づいています。例：

.fooDiv[min-width="1000px"] .form { /* code for 1. */ } 
.fooDiv[min-width="900px"] .form { /* code for 2. */ } 
.fooDiv[min-width="800px"] .form { /* code for 3. */ } 

これらの属性は、リスナーによって設定されたので、彼らは.fooDivの大きさの各変更に取り組んでいます。

---

（SASS/SCSSと互換性がない）別のプロジェクト、

https://github.com/Mr0grog/element-query

は、次のように動作します：上記のCSSで

.test-element:media(max-available-width: 400px) { 
    background: purple; 
} 

、 .test-elementは紫を持っています背景内にある場合は、 400pxの幅以下の要素内にあります。

---

さらに別、

https://github.com/tysonmatanich/elementQuery 私は毎日のプロジェクトでそれを使用しています。これについてさらに

---

：

http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

Answer 2

まっすぐなCSSの点ではわかりません。これを実現するためにjQueryを組み合わせることができます。 jQueryの例：

$(document).ready(function() { 
    box_size(); 

    $(window).resize(function() { 
     box_size(); 
    }); 

    function box_size() { 
     var window_width = $(window).width(); 

     $('.box').removeClass('break-one').removeClass('break-two').removeClass('break-three'); 

     if (window_width <= 1000 && window_width > 900) { 
      $('.box').addClass('break-one'); 
     } 
     else if (window_width <= 900 && window_width > 800) { 
      $('.box').addClass('break-two'); 
     } 
     else if (window_width <= 800) { 
      $('.box').addClass('break-three'); 
     } 
    } 
}); 

この関数は2回呼び出されます。ブラウザがサイズを変更したときにサイズを確認するためにロードしてからもう一度サイズを変更します。

のCss：もちろん

.box { 
    color: black; 
} 

.box.break-one { 
    color: red; 
} 

.box.break-two { 
    color: blue; 
} 

.box.break-three { 
    color: yellow; 
} 

jsfiddleでアクションでそれを参照してください。質問のポストの下の@ torazaburoさんのコメントの2番目のリンクにhttp://jsfiddle.net/PWbvY/