css - attribute - Consultas de medios: navegador móvil o de escritorio

title html attribute

Question

He visto muchos sitios que son receptivos tanto en navegadores de escritorio como en navegadores de teléfonos móviles, estoy trabajando en un sitio y tengo la siguiente configuración de hojas de estilo: (El sitio web de Hicks Design es un buen ejemplo de lo que quiero lograr si lo necesita )

/* Normal styles go here */
@media screen and (min-device-width:321px)
{
/* Styles */
}
@media screen and (min-width:701px)
{
/* Styles */
}
@media screen and (min-width:1025px)
{
/* Styles */
}
@media screen and (min-width:2049px)
{
/* Styles */
}

Sin embargo, mi hoja de estilos anterior solo parece funcionar en los navegadores de escritorio. (probado con Android Firefox y el navegador predeterminado de Android en un Sony Xperia Ray)

Las reglas del sitio de diseño de Hicks son muy similares a las mías, sin embargo, usan minimo y máximo, pero para mí no parece funcionar tanto en navegadores móviles como de escritorio. (Planeo optimizar mis consultas de medios más, solo estoy tratando de que los conceptos básicos funcionen como yo los quiero en este momento).

Si uso max-device-width en lugar de max-width, se vuelve receptivo en los navegadores móviles, pero no en los navegadores de escritorio ...

He intentado lo siguiente para solucionar el problema:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}

además:

@media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}

Sin embargo, no creo que ninguno de estos sean correctos, ya que la barra de herramientas del desarrollador web para Firefox se queja de ello. También intenté algunas variaciones de las reglas anteriores, pero todavía no puedo hacer que funcione.

Por lo que entiendo max-width se lee el ancho de la ventana gráfica (por ejemplo, ... el ancho de la ventana del navegador) y max-device-width lee el ancho real de la pantalla que está usando para ver el sitio. - Estoy confundido por qué el ancho máximo no parece leer el ancho del navegador del móvil.

Creo que posiblemente me esté perdiendo algo obvio sobre las consultas de los medios aquí ... No parece tener sentido que si quiero que mi sitio responda en los navegadores de escritorio y dispositivos móviles, debo hacer una copia de todas mis consultas de medios y simplemente cambiar la consulta de ''pantalla y (ancho máximo)'' a ''pantalla y (max-device-width)'' o viceversa. (que me da vergüenza incluso escribir como una solución aquí)

¿Cómo puedo combinar las reglas (ancho máximo) y (ancho máximo del dispositivo) o cómo puedo lograr esto?

Si prefiere no leer todo lo anterior:

Estoy usando @media screen y (max-width: 480px) sin embargo, parece que solo la pantalla @media y (max-device-width: 480px) funciona en teléfonos móviles. ¿Cómo puedo combinar ambas reglas para lograr un diseño receptivo en los navegadores móviles y de escritorio?

Answer 1

Hay muchos medios disponibles, y si desea seleccionar solo por sus propiedades, use la palabra clave all :

@media all and (max-width:480px)
{
/* Styles */
}

Editar :

Combine reglas con o:

@media all and (prop1:val1), all and (prop2:val2)
{
/* Styles */
}

Combine reglas con y:

@media all and (prop1:val1) and (prop2:val2)
{
/* Styles */
}

Answer 2

@media screen and (min-width:240px) and (max-width:480px),
screen and (min-device-width:240px) and (max-device-width:480px)
{
/* Styles */
}

Resolvió el problema, las respuestas anteriores me ayudaron a votar. Gracias.