12

ブラウザ ウィンドウの幅に依存するフォーム構造があります。質問を簡単にするために、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. */ }

私が求めているのは、すべての要素に対して同じ機能を取得することです。そのため、幅のあるを配置formすると、CSS は、最初のレイアウト ( ) のスタイル設定に使用される特定の同じプロパティに適用されます。これが に縮小されると、ブラウズ ウィンドウの幅が に設定されている場合でも、自動的に 3 番目のレイアウトにスタイル変更されます。div1000pxformmax-width:1000pxdiv800pxform1000px

出来ますか？

4

2 に答える 2

11

質問投稿の下にある @torazaburo のコメントの 2 番目のリンクのおかげで、完璧な解決策を見つけました。

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

まだ非常に若いプロジェクトであり、まだいくつかの脆弱性があります (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

次のように動作します。

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

上記の CSS では、幅が広いか小さい.test-element要素内にある場合、紫色の背景になります。400px

さらにもう一つ、

https://github.com/tysonmatanich/elementQuery 日常のプロジェクトで使用しています。

これについてさらに詳しく：

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

于 2013-07-29T13:48:34.360 に答える
0

まっすぐな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 での動作を確認してください: http://jsfiddle.net/PWbvY/

于 2013-07-29T05:09:19.603 に答える