Come scegliere come target una dimensione dello schermo specifica utilizzando @media media query?

Question

Sono nuovo al design reattivo, sto giocando con twitter bootstrap responsive.css ora. E sto incontrando qualche problema con il mio progetto.

Il problema è che la colonna sinistra non collasserà (se è il termine giusto), o non si impilerà. Quello che voglio è che la colonna di sinistra si sposterà sotto la colonna span8 e ridimensionerà la sua larghezza. Quello che fa per ora è, la larghezza della colonna sinistra diminuisce e spremendo tutto il suo contenuto al suo interno. Mi rivolgo alle dimensioni dello schermo mobile degli schermi multimediali 768x1024.

Il mio markup di base per il layout è, span8 per sinistra e span4 per destra. span4 è dove sono i miei altri blocchi.

<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> 

mia domanda principale è, come facciamo a bersaglio una dimensione specifica dello schermo utilizzando le media query (utilizzando Twitter bootstrap). E poi personalizzarlo in base alle nostre esigenze?

Answer 1

finalmente ho avuto questa, dalla lettura di articoli di blog e le domande di overflow dello stack che aveva ricevuto risposta, e articoli pubblicati dai vostri commenti su questa domanda.

Sulla base dei punti di interruzione comuni e delle porte di visualizzazione per dispositivi mobili, ad esempio 1200px vista panoramica per grandi destkops, devo inserire il mio stile in una query multimediale.

cioè @media (min-width) {mystyle here}

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

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

} 

Dal momento che sto usando il file Twitter Bootstrap Responsive.css, ho bisogno di personalizzare la media query per certa finestra, in modo che si adatti alle mie esigenze di progettazione.

Bene visto che sto progettando una larghezza fissa di 960px, personalizzerò e ricalcolare le larghezze delle mie classi .container e span. Converto pixel in percentuale di base dalla larghezza di base di 960 px.

Quindi qualsiasi blocco o elemento che vorrei comprimere, nascondere o mostrare in determinate finestre, deve essere stilizzato di conseguenza all'interno della query multimediale.

E ... Nuova cosa ho imparato a conoscere il responsive design. La dimensione dello schermo è diversa da Viewport.

Answer 2

È necessario utilizzare la classe row-fluid (anziché la classe row) per sfruttare la parte reattiva di Bootstrap. Maggiori informazioni allo http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem.

Così il layout di base dovrebbe essere:

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

Answer 3

Dal momento che si sta utilizzando Bootstrap, utilizzare le variabili predefinite per indirizzare dimensioni specifiche dello schermo:

// 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; 

Esempio:

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

Answer 4

I exapmles classe fila-fluido in Bootstrap si possono trovare qui http://getbootstrap.com/2.3.2/examples/fluid.html

Se si desidera che Visual Studio aiuti con i CSS, ottenere il file LESS da http://bootswatch.com e ottenere t lui Twitter.Bootstrap. Pacchetto di nuget.Quindi aggiungere il seguente al file bootswatch.less

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

C'è un'alternativa al bootstarp fila-fluido, chiamato 'Fondazione' http://foundation.zurb.com/develop/download.html#customizeFoundation

Ha definizioni per 'piccoli' e 'grandi' media e molto altro ancora :

<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>