css - queries - media query min and max

Consultas de medios comunes de CSS Puntos de interrupción

Question

Estoy trabajando en un sitio web receptivo con CSS Media Queries.

¿Es la siguiente una buena organización para dispositivos? Teléfono, Ipad (paisaje y retrato), computadora de escritorio y computadora portátil, pantalla grande

¿Cuáles son los valores de punto de interrupción de consultas de medios comunes?

Estoy planeando usar los siguientes puntos de interrupción:

• 320: Retrato de un teléfono inteligente
• 481: Paisaje de teléfonos inteligentes
• 641 o 768 ???: IPad Portrait ???
• 961: IPad Landscape / Small Laptop ???
• 1025: Escritorio y computadora portátil
• 1281: Pantalla ancha

¿Qué piensas? Tengo algunas dudas como ??? puntos.

Answer 1

Considere usar los puntos de quiebre de twitter bootstrap . con una tasa de adopción tan masiva, deberías estar seguro ...

Answer 2

En lugar de tratar de orientar las reglas @media en dispositivos específicos, es posiblemente más práctico basarlas en su diseño particular. Es decir, reduzca gradualmente la ventana de su navegador de escritorio y observe los puntos de corte naturales para su contenido. Es diferente para cada sitio. Siempre que el diseño fluya bien en cada ancho de navegador, debería funcionar de manera confiable en cualquier tamaño de pantalla (y hay muchos y muchos por ahí).

Answer 3

En lugar de usar píxeles, debería usar em o porcentaje, ya que es más adaptable y fluido, es mejor que los dispositivos de destino no se centren en su contenido:

Lectores de HTML5 leídos, primer móvil

Answer 4

Esto es del link css-tricks

/* 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 */
}

Answer 5

Estoy usando 4 puntos de ruptura, pero como ralph.m dijo que cada sitio es único. Deberías experimentar No hay puntos mágicos de quiebre debido a tantos dispositivos, pantallas y resoluciones.

Esto es lo que uso como plantilla. Estoy revisando el sitio web para cada punto de interrupción en diferentes dispositivos móviles y la actualización de CSS para cada elemento (ul, div, etc.) no se muestra correctamente para ese punto de interrupción.

Hasta el momento, eso funcionaba en varios sitios web receptivos que he creado.

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}    

ACTUALIZAR

Según septiembre de 2015, estoy usando uno mejor. Descubrí que estos puntos de interrupción de consultas de medios coinciden con muchos más dispositivos y resoluciones de pantalla de escritorio.

Tener todos los CSS para escritorio en style.css

Todas las consultas de medios en responsive.css: todas las CSS para el menú de respuesta + puntos de interrupción de medios

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px) and (max-width: 1999px){ ... }

Answer 6

He estado usando:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

Mantiene las cosas relativamente simples y te permite hacer algo un poco diferente para los teléfonos en modo retrato (muchas veces me veo obligado a cambiar varios elementos para ellos).

Answer 7

Mantenga su código limpio y las hojas de estilo separadas lógicamente por configuración de tipo ''medio'' de la pantalla ...


1) Usar la respuesta de himansu de arriba como referencia: Consultas de medios CSS comunes Puntos de interrupción
Y
2) https://www.w3schools.com/css/css3_mediaqueries.asp

tu respuesta sería:

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape..css">

Answer 8

Puedo decirte que estoy usando solo un único punto de interrupción en 768, que es min-width: 768px para servir en tabletas y computadoras de escritorio, y max-width: 767px para atender teléfonos.

No he vuelto a mirar atrás desde entonces. Hace que el desarrollo receptivo sea fácil y no una tarea rutinaria, y proporciona una experiencia razonable en todos los dispositivos a un costo mínimo para el tiempo de desarrollo sin la necesidad de temer a un nuevo dispositivo Android con una nueva resolución que no haya tenido en cuenta.

Answer 9

Si va a Google Analytics, puede ver qué resolución de pantalla utilizan sus visitantes al sitio web:

Audiencia> Tecnología> Navegador y sistema operativo> Resolución de pantalla (en el menú de arriba de las estadísticas)

Mi sitio recibe alrededor de 5,000 visitantes al mes y las dimensiones utilizadas para la versión gratuita de responsinator.com son un resumen bastante preciso de las resoluciones de pantalla de mis visitantes.

Esto podría evitar que necesites ser demasiado perfeccionista.

Answer 10

Siempre uso Desktop primero, el móvil primero no tiene la prioridad más alta, ¿verdad? IE <8 mostrará css móvil.

normal css here: 

@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}

a veces algunos tamaños personalizados. No me gusta el arranque, etc.

Answer 11

Tus puntos de quiebre se ven muy bien. He probado 768px en tabletas Samsung y va más allá de eso, así que realmente me gusta el 961px . No necesariamente los necesita todos si usa técnicas de CSS receptivas, como % width/max-width para bloques e imágenes (también texto).

Answer 12

Consultas de medios para dispositivos estándar

En general, para dispositivos móviles, tabletas, computadoras de escritorio y pantallas grandes

1. Móviles

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

    /* Styles */

    }

2. Tabletas

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

3. Computadoras de escritorio y portátiles

@media only screen 
and (min-width : 1224px) {

    /* Styles */

}

4. Pantallas más grandes

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

En detalle, incluyendo paisaje y retrato

/* 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 */
    }

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

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

    /* Tablets, 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 */
    }

Referencia

Answer 13

@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}