¿Cómo utilizar las consultas de medios para dispositivos Android con la versión de Android 2.2.1 y 2.3.5 y su tamaño de pantalla de 240 * 320 y el tamaño de pantalla de 480 * 800?

Tuve que usar una imagen que era del tamaño 304 * 250.

Está funcionando perfectamente en tamaño de pantalla de 320 * 480 y tamaño de pantalla de 720 * 1280.

¿Cuándo quería verificar lo mismo en un tamaño de pantalla de 240 * 320 y un tamaño de pantalla de 480 * 800? Ni las imágenes de fondo se vieron ni el valor de los datos.

Paso correctivo tomado:

Pensé en usar una sombra de caja en lugar de la imagen. Lo implementé y lo probé en un tamaño de pantalla de 320 * 480. Fue perfecto.

Pensé en probar lo mismo en el tamaño de pantalla de 240 * 320 y el tamaño de pantalla de 480 * 800 usando Media Query

Me referí aquí e intenté implementarlo, pero no tuve éxito.

Mi css normal

.container { width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px; } 

Mi Media Query CSS

 @media only screen and (max-device-width: 240px) { .container { width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ; } } 

He llamado al CSS de la siguiente manera

  

Problema: No se implementó. No puedo ver la caja. Era solo una pantalla vacía.

No tiene acceso a la consulta de medios css, la mencionada anteriormente.

SOLUCIONES PROBADAS

  

¿Hay algún error en mi implementación? ¡¡Por favor ayuda!!

Para aclarar, si he entendido el primer punto de la respuesta

  .name_layer { float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px; } .name_layer_text { margin-left:1%; } .swipe_body { padding:0; margin:0; width:100%; height:480px; } .container { width:200px; height:10px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; } @media only screen and (max-width: 240px) { .container { width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ; } } 

¿Es esto correcto? pero mi salida viene de acuerdo con el contenedor CSS … y lo pruebo en un dispositivo, no en el navegador

editar: 2

  @media only screen and (max-width:240px) { .container { width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; } } @media only screen and (min-width:240px) { .container { width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px; } } 

Es un dispositivo más pequeño y está tomando el segundo ancho mínimo de CSS : 240 px

Estas son algunas de las posibilidades por las que su consulta de medios no funciona.

  1. Cuando utilizó CSS ​​de consulta de medios, ¿eliminó su CSS normal? ¿O conservaste los dos? Si quieres tener ambas cosas, entonces debes mantenerlas de la manera adecuada. De lo contrario, CSS normal sobreescribirá la que está dentro de la consulta de medios.

    Por ejemplo, si tu CSS es así …

     @media only screen and (max-width: 241px) { .container { width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ; } } .container { width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ; } 

    El estilo .container que está fuera de la consulta de medios sobrescribirá el que está dentro de la consulta de medios. Por lo tanto, si hay estilos que son específicos para la resolución del dispositivo, entonces debe envolverlos dentro de la consulta de medios.

    Los estilos que no están relacionados con la resolución del dispositivo, por ejemplo, el color del encabezado, que es el mismo en todas las resoluciones, deben estar fuera de la consulta de medios.

  2. Un posible problema puede ser que la consulta de medios no coincida con la resolución del dispositivo.

  3. También compruebe qué orientación está tratando de ver.

  4. Si está probando en el navegador, verá los estilos dentro de la consulta de medios solo cuando reduzca el ancho del navegador para satisfacer la consulta de medios. ¡Muy importante! Porque al usar la consulta de medios, dices al navegador que aplica esto solo cuando el ancho es demasiado. Por ejemplo, para ver los cambios dentro de la consulta de medios de ancho máximo 241px, necesita reducir el ancho de su navegador a menos de 240px (solo reduzca el ancho del navegador a muy mínimo)

Puede intentar seguir la consulta de medios para un dispositivo de resolución 240 * 320.

Creo que encontré la solución para su problema, ¿necesita eliminar el dispositivo de la consulta de medios (prueba en el navegador?)

 @media only screen and (max-width: 241px) { .container { width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ; } } 

Puede intentar seguir la consulta de medios para un dispositivo de resolución 480 * 800

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

Nota: tenga mucho cuidado con las consultas de los medios. cuando establezca mín. y máx. se aplicarán para todas las resoluciones que satisfagan los mínimos y máximos. Por ejemplo, la consulta de medios anterior se aplicará a todos los dispositivos cuyo ancho sea superior a 480.