Anchuras recomendadas para diseños receptivos

Question

¿Qué recomienda deben ser los anchos que debo usar para un diseño receptivo?

/* Default Width: */ 
    .container { width: 940px; margin: 0 auto; } 

    /* Smaller than standard 960 (devices and browsers) */ 
    @media only screen and (max-width: 959px) {} 

    /* Tablet Portrait size to standard 960 (devices and browsers) */ 
    @media only screen and (min-width: 768px) and (max-width: 959px) {} 

    /* All Mobile Sizes (devices and browser) */ 
    @media only screen and (max-width: 767px) {} 

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
    @media only screen and (min-width: 480px) and (max-width: 767px) {} 

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
    @media only screen and (max-width: 479px) {} 

Answer 1

No hay recomienda ancho para el diseño sensible. Es totalmente depende de su estructura de diseño. Layout Structure significa utilizar MEDIAQUERIES cuando desee cambios específicos en un ancho específico o cuando su diseño rompa un ancho de pantalla específico.

Answer 2

Si está buscando las mejores prácticas/comunes y los anchos particulares aplicados al usar diseños receptivos, le sugiero que consulte sistemas de grillas disponibles. Una búsqueda rápida en Google arroja muchos resultados, pero uno de mis favoritos sería the 1140 grid - Estoy muy de acuerdo con su lógica al elegir las medidas. Verbatim:

La rejilla 1140 se adapta perfectamente a un monitor 1280. En los monitores más pequeños se vuelve fluido y se adapta al ancho del navegador. ¡Chatarra 1024! Diseñe una vez en 1140 para 1280, y con muy poco trabajo adicional en , se adaptará para funcionar en casi cualquier monitor, incluso en el móvil .

Si este no es el tipo de respuesta que estaba buscando, por favor, vuelva a formular la pregunta.

Answer 3

He empezado a utilizar "320 y hasta" anchos 's que son los siguientes:

Tenga en cuenta que van desde pequeñas a grandes, no al revés sin embargo. Esto está más en línea con la mejora progresiva y definitivamente prefiere de todos modos: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://stuffandnonsense.co.uk/projects/320andup/

// Default styling here 

// Little larger screen 
@media only screen and (min-width: 480px) { 

} 

// Pads and larger phones 
@media only screen and (min-width: 600px) { 

} 

// Larger pads 
@media only screen and (min-width: 768px) { 

} 

// Horizontal pads and laptops 
@media only screen and (min-width: 992px) { 

} 

// Really large screens 
@media only screen and (min-width: 1382px) { 

} 

// 2X size (iPhone 4 etc) 
@media only screen and 
     (-webkit-min-device-pixel-ratio: 1.5), only screen and 
     (-o-min-device-pixel-ratio: 3/2), only screen and 
     (min-device-pixel-ratio: 1.5) { 

} 

Si utiliza Sass, aquí hay un pequeño truco que he estado usando:

$laptop-size: "only screen and (min-width: 768px)"; 
$desktop-size: "only screen and (min-width: 1382px)"; 
// etc 

Y luego

@media #{$laptop-size} { 
    // Styling here... 
} 

De esta manera usted puede Cambie fácilmente los anchos en un solo lugar, y no tiene que escribir todo en todo momento.