¿Cuáles son los buenos valores de resolución para usar con consultas de medios?

Question

Recientemente he estado jugando con CSS Media Queries porque es una gran manera de hacer que mi sitio web se adapte a varios tamaños de pantalla. Estoy planeando implementarlos en la versión en vivo.

Mi pregunta es: ¿Hay algún valor de resolución recomendado en el que cambie el diseño?

Answer 1

Consulta este artículo para una plantilla '320 y Up' - por Andy Clarke, es utilizado por muchos desarrolladores y diseñadores: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

Si se desplaza hacia abajo a los medios consulta la sección verá que utilizan cinco CSS3 Medios Incrementos de consulta (480, 600, 768, 992 y 1382px). Normalmente me limito a 4 (480, 600, 768, 1024).

Para explicar los rangos:

min-width: 480px: se dirigirá a los dispositivos móviles en el modo horizontal y hasta

min-width: 600px: Blancos tabletas en modo vertical y hacia arriba

min-width: 768px: Blancos tabletas en modo horizontal y hasta

min-width: 1024px: se dirige a la vista de escritorio

Y normalmente voy a tener mi CSS de vista de retrato móvil desde el principio (de ahí el término "320 y más").

Answer 2

Me gustaría simplemente agregar a la respuesta de Suvi.

Adaptive Design aplica consultas de medios a resoluciones específicas; sin embargo, con Responsive Design puede agregar los puntos de interrupción donde lo considere necesario.

No existe una regla en cuanto a cuántos puntos de interrupción debe tener una página, pero se debe agregar una donde se rompa el diseño. El objetivo es asegurarnos de que el diseño y el contenido fluyan correctamente independientemente del ancho de la ventana gráfica.

Creo que este post ofrece una buena visión general:

http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html

Answer 3

probar este uno con pantalla retina

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

esperamos que están bien

Answer 4

Escribí esta solución menos:

/* screens range */ 

@screen-s-max: 20em;   /* 320px */ 
@screen-min:  20.063em;  /* 321px */ 
@screen-max:  40em;   /* 640px */ 
@screen-m-min: 40.063em;  /* 641px */ 
@screen-m-max: 64em;   /* 1024px */ 
@screen-l-min: 64.063em;  /* 1025px */ 
@screen-l-max: 90em;   /* 1440px */ 
@screen-xl-min: 90.063em;  /* 1441px */ 
@screen-xl-max: 120em;  /* 1920px */ 
@screen-xxl-min: 120.063em; /* 1921px */ 

/* 
0----- smallmobile -----320----- mobile -----640----- tablet -----1024----- notebook -----1440----- desktop -----1920----- wide 
*/ 

@onlyScreen: ~"only screen"; 

@smallmobile: ~"(max-width: @{screen-s-max})"; 
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})"; 
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})"; 
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})"; 
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})"; 
@wide: ~"(min-width: @{screen-xxl-min})"; 

@portrait: ~"(orientation:portrait)"; 
@landscape: ~"(orientation:landscape)"; 

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
~"only screen and (min-device-pixel-ratio: 1.5)"; 


@mobile-and-more: ~"(min-width: @{screen-min})"; 
@tablet-and-more: ~"(min-width: @{screen-m-min})"; 
@notebook-and-more: ~"(min-width: @{screen-l-min})"; 
@desktop-and-more: ~"(min-width: @{screen-xl-min})"; 

/* 

syntax example 

@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{ 
    body{ 
    opacity: 0.8; 
    } 
} 

*/ 

Como se muestra en el ejemplo de sintaxis, puede combinar todas estas variables menos y obtener consulta compleja de medios. Use "y" para operador lógico AND y coma para OR. Puede combinar diferentes resoluciones de pantalla, orientación del dispositivo (paisaje/retrato) y retina o no dispositivos.

Este código también es fácil de configurar porque puede editar/agregar/eliminar valores de rango de pantallas para administrar diferentes resoluciones de pantalla.