@mediaメディアクエリを使用して特定の画面サイズをターゲットに設定するにはどうすればよいですか？

Question

私はレスポンシブデザインには新しく、私は今twitterブートストラップresponsive.cssで忙しいです。そして私は私のプロジェクトにいくつかの問題を抱えています。

問題は、私の左の列が崩壊することはありません（適切な用語であれば）、またはスタックされません。私が欲しいのは、左の列がspan8の列の下に移動し、その幅を変更することです。今のところは、左の列の幅が狭くなり、その中のすべての内容が絞られます。私は、768x1024のメディア画面のモバイル画面サイズをターゲットにしています。

レイアウトの基本的なマークアップは、左側の場合はspan8、右側の場合はspan4です。 span4は私の他のブロックがある場所です。

<div class="row"> 
<div class="span8"> 
    some block with contents 
</div> 

<div classs="span4"> 
    <div class="sideBlock"><!--fluid width was set--> 
     <img src="http://placehold.it/298x77"> 
    </div> 
</div> 

私の主な問題は、我々は（Twitterのブートストラップを使用して）メディアクエリを使用して、特定の画面サイズを対象としますか、です。それを私たちのニーズに合わせてカスタマイズしますか？

Answer 1

私は最終的にブログや答え、との記事がこの質問にあなたのコメントから投稿されたスタックオーバーフローの質問から記事を読むことによって、この1つを得ました。

モバイルデバイス用の共通ブレークポイントとビューポート（大型デスクトップ用の1200pxワイドビューポート）に基づいて、自分のスタイルをメディアクエリに挿入する必要があります。

すなわち、@media (min-width) {mystyle here}

@media (min-width: 1200px) { 
     .myContainer { 
      width: 960px; 
      margin: 0 auto; 

     } 
     .myleftBlock-should-collapse { 
      float: none; 
      width: 100%; 
     } 

} 

私はTwitterのブートストラップResponsive.cssファイルを使用しておりますのでそれは私の設計ニーズにフィットするように、私は、特定のビューポートのメディアクエリーをカスタマイズする必要があります。

固定幅の960pxを設計して以来、私は.containerクラスとspanクラスの幅をカスタマイズして再計算します。私は960pxの私のベースの幅からパーセントベースにピクセルを変換します。

私が崩壊したり、特定のビューポートに表示したり隠したりしたいブロックや要素は、メディアクエリ内でスタイルに合わせてください。

...そして、私はレスポンシブデザインについて学びました。画面サイズはビューポートとは異なります。

Answer 2

ブートストラップの応答部分を利用するには、クラスの代わりにrow-fluidクラスを使用する必要があります。 http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystemで詳細を読む。

だからあなたの基本的なレイアウトは次のようになります。

<div class="row-fluid"> 
    <div class="span4">...</div> 
    <div class="span8">...</div> 
</div> 

Answer 3

あなたはブートストラップを使用しているので、特定の画面サイズをターゲットに、デフォルトの変数を使用します。

// Extra small screen/phone 
$screen-xs:     480px !default; 

// Small screen/tablet 
$screen-sm:     768px !default; 

// Medium screen/desktop 
$screen-md:     992px !default; 

// Large screen/wide desktop 
$screen-lg:     1200px !default; 

例：

@media (min-width: $screen-sm) and (max-width: $screen-md) { 
    /* 
    * styles go here 
    */ 
} 

Answer 4

ブートストラップの行流体クラスexapmlesがここ http://getbootstrap.com/2.3.2/examples/fluid.htmlを見つけることができます

Visual StudioでCSSを手助けしたい場合は、http://bootswatch.comからLESSファイルを取得し、t彼はTwitter.Bootstrap.Lessナゲットパッケージ。その後

@import url("bootstrap/bootstrap.less"); 

bootswatch.lessファイルに以下を追加しhttp://foundation.zurb.com/develop/download.html#customizeFoundation

「財団」と呼ばれるブートストラップ行流体の代替は、ありそれは小さな 'と'大型のメディアやその他たくさんの定義を持っています：

<div class="show-for-small" style="text-align: center"> 
    <a href="#">Desktop here</a> 
</div> 
<div class="large-4 columns hide-for-small"> 
    <a href="#"> 
     <div class="panel radius callout" style="text-align: center"> 
     <strong>Mobile here</strong> 
     </div> 
    </a> 
</div>