¿Cómo apuntar a un tamaño de pantalla específico usando @media media query?

Question

Soy nuevo en el diseño responsive, estoy jugando con twitter bootstrap responsive.css ahora. Y estoy encontrando algunos problemas con mi proyecto.

El problema es que mi columna de la izquierda no colapsará (si ese es el término correcto), o no se acumulará. Lo que quiero es que la columna de la izquierda se desplace por debajo de la columna span8 y cambie su ancho. Lo que hace por ahora es, el ancho de la columna izquierda disminuye y exprime todo su contenido dentro de ella. Me estoy enfocando en el tamaño de pantalla móvil de 768x1024 pantallas multimedia.

Mi marcado básico para el diseño es, span8 para la izquierda y span4 para la derecha. span4 es donde están mis otros bloques.

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

Mi pregunta principal es, ¿cómo nos dirigimos a un tamaño de pantalla específico usando preguntas de los medios de arranque (usando Twitter). ¿Y luego personalizarlo para que se ajuste a nuestras necesidades?

Answer 1

fin llegué éste, mediante la lectura de los artículos de los blogs y las preguntas de desbordamiento de pila que habían sido contestadas, y artículos publicados a partir de sus comentarios sobre esta cuestión.

Basado en Puntos de interrupción comunes y Puertos de visualización para dispositivos móviles, es decir, una ventana gráfica de 1200px para destinos grandes, tengo que insertar mi propio estilo en una consulta multimedia.

es decir, @media (min-width) {mystyle here}

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

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

} 

Desde que estoy usando el archivo de Twitter Bootstrap Responsive.css, necesito personalizar la consulta de cobertura para algunas de visualización, de modo que se ajuste a mis necesidades de diseño.

Bueno, ya que estoy diseñando un ancho fijo de 960px, voy a personalizar y volver a calcular los anchos para mis clases .container y span. Convertiré una base de píxel a porcentaje de mi ancho de base de 960px.

Así que cualquier bloque o elemento que quisiera colapsar, ocultar o mostrar en ciertas ventanas gráficas, se diseñará de acuerdo con la consulta de medios.

Y ... Lo nuevo que aprendí sobre el diseño receptivo. El tamaño de la pantalla es diferente de la ventana gráfica.

Answer 2

Debe utilizar la clase row-fluid (en lugar de la clase row) para beneficiarse de la parte receptiva de Bootstrap. Leer más en http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem.

Por lo que su diseño básico debe ser:

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

Answer 3

Puesto que usted está usando Bootstrap, utilice las variables predeterminadas para apuntar tamaños de pantalla específicos:

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

Ejemplo:

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

Answer 4

Los exapmles clase fila de líquido en Bootstrap se pueden encontrar aquí http://getbootstrap.com/2.3.2/examples/fluid.html

Si desea que Visual Studio lo ayude con CSS, obtenga el archivo LESS de http://bootswatch.com y obtenga t El paquete nuget de Twitter.Bootstrap.Less.A continuación, añadir lo siguiente al archivo bootswatch.less

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

hay alternativa a boostrap fila de líquido, llamado 'Fundación' http://foundation.zurb.com/develop/download.html#customizeFoundation

Tiene definiciones de 'pequeños' y 'grandes' medios y mucho más :

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