15

メディア クエリではなく、親 div に基づいて応答するように、ブートストラップのコンテナーが必要です。可能であれば、特にjavascriptを使用しないと、最善の方法を見つけることができません。現在、サイズ変更時に、.span*div を 100% 幅にするか (親 div が 640px 未満になる場合)、または列 CSS を尊重するかを計算します。

ここにjsfiddleがあります。の内側にある CSS を使用すると.somecontainer、.span*モバイルのようにレイアウトする必要があります。たとえば、CSS を 640px 以上に変更すると、各列が全幅になるはずです。列のレイアウトに再レイアウトされます。

何か案は？

現在、これに似たコードを使用しています（これは理想的ではありません）

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
  });
});

http://jsfiddle.net/tsdexter/ArqUR/1/

4

1 に答える 1

7

elementQuery ポリフィルを使用することで、これを達成できるはずです。ここに gitHub のレポがあります。ここに Smashing Magazine の記事があり、概念について詳しく説明しています。ここに、著者がその使用方法を示すために作成した CodePenがあります。

基本的に、CSS を使用して、親 div に基づいてブレークポイントを定義します。構文の例を次に示します。

header[min-width~="500px"] {
    background-color: #eee;
}

以下は、Smashing Article からの関連する引用です。

要素クエリの紹介。エレメント クエリは、条件が満たされた場合に何らかの CSS が適用されるという点で、メディア クエリに似ています。要素のクエリ条件 (最小幅、最大幅、最小高さ、最大高さなど) は、ブラウザーではなく要素に基づいています。

于 2015-06-11T15:28:38.580 に答える