¿Por qué mis consultas de medios CSS3 no funcionan?

En styles.css, estoy usando consultas de medios, los cuales usan una variación de:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Los sitios cambian de tamaño al diseño que quiero en un navegador normal (Safari, Firefox) cuando encojo la ventana, sin embargo, el diseño móvil no se muestra en absoluto en un teléfono. En cambio, solo veo el CSS predeterminado.

¿Alguien puede señalarme en la dirección correcta?

Los tres fueron consejos útiles, pero parece que necesitaba agregar una metaetiqueta:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Ahora parece funcionar tanto en Android (2.2) como en iPhone ...

No olvide tener las declaraciones css estándar sobre la consulta de medios o la consulta tampoco funcionará.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Sospecho que la palabra clave onlypuede ser el problema aquí. No tengo problemas al usar consultas de medios como esta:

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

utilicé bootstrap en un sitio de prensa pero no funcionó en IE8, utilicé css3-mediaqueries.js javascript pero aún no funciona. si desea que su consulta de medios funcione con este archivo javascript, agregue la pantalla a su línea de consulta de medios en css

Aquí hay un ejemplo :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

Línea de enlace css tan simple como la línea anterior.

Hoy tuve una situación similar. La consulta de medios no funcionó. Después de un tiempo encontré ese espacio después de 'y' faltaba. La consulta de medios adecuada debería verse así:

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

El orden secuencial del código CSS también es importante, por ejemplo:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

el código anterior no funcionará debido a la orden ejecutada. Necesito escribir de la siguiente manera:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Siempre mencione max-width y min-width en algunas unidades como px o rem. Esto lo resolvió para mí. Si lo escribo sin la unidad y solo el valor del número, el navegador no puede leer las consultas de medios. ejemplo: esto es incorrecto en la pantalla solo de medios y (ancho máximo: 950) y esto es correcto en la pantalla solo de medios y (ancho máximo: 950 píxeles)

Lanzando otra respuesta al ring. Si está tratando de usar variables CSS, entonces fallará silenciosamente.

@media screen and (max-device-width: var(--breakpoint-small)) {}

Las variables CSS no funcionan en consultas de medios (por diseño).

Rara razón que nunca antes había visto: si está utilizando un selector "padre> hijo" fuera de la consulta de medios (en Firefox 69), podría romper la consulta de medios. No estoy seguro de por qué sucede esto, pero para mi escenario esto no funcionó ...

@media whatever {
    #child { display: none; }
}

Pero agregar el padre para que coincida con algún otro CSS más arriba en la página, esto funciona ...

#parent > #child { display: none; }

Parece que especificar el padre no debería importar, ya que una identificación es muy específica y no debe haber ambigüedad. Tal vez es un error en Firefox?

El fragmento de código del OP usa claramente el marcado de comentarios correcto, pero CSS puede romperse de manera progresiva, por lo tanto, si hay un error de sintaxis, es probable que todo lo que ocurra después falle. Un par de veces he confiado en fuentes confiables que proporcionaron marcas de comentarios incorrectas que rompieron mi hoja de estilo. Dado que el OP proporcionó solo una pequeña sección de su código, sugeriría lo siguiente:

Asegúrese de que todos sus comentarios CSS utilicen este marcado /*... */, que es el marcado de comentarios correcto para CSS de acuerdo con MDN

Valide su CSS con un linter o un validador seguro en línea. Aquí hay uno de W3

Más información: Fui a verificar los últimos puntos de interrupción de consulta de medios recomendados desde bootstrap 4 y terminé copiando la placa de caldera directamente de sus documentos. Casi todos los bloques de código fueron etiquetados con comentarios de estilo javascript// , que rompieron mi código, y solo me dieron errores crípticos de compilación con los que solucionar los problemas, que pasaron por mi cabeza en ese momento y me causaron tristeza.

El editor de texto IntelliJ me permitió comentar líneas específicas de css en un archivo MENOS usando la tecla de acceso rápido ctrl + /, que fue genial, excepto que inserta //por defecto en tipos de archivos no reconocidos . No es freeware y menos es bastante convencional, así que confié en él y lo seguí. Eso rompió mi código. Hay un menú de preferencias para enseñarle el marcado de comentarios correcto para cada tipo de archivo.

La inclusión de una metaetiqueta como la siguiente puede hacer que el navegador maneje el zoom de la vista de manera diferente.

<meta content="width=device-width, initial-scale=1" name="viewport" />

También encontré este problema recientemente, y luego descubrí que era porque no puse un espacio entre andy (. Este fue el error

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

Luego lo cambié a esto para corregirlo

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

Yo uso algunos métodos dependiendo. En la misma hoja de estilo utilizo: @media (ancho máximo: 450 px), o por separado, asegúrese de tener el enlace en el encabezado correctamente. Eché un vistazo a tu arreglo y tienes una confusa variedad de enlaces a css. Actúa como dices también en HTC desire S.

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Para mí había indicado en max-heightlugar de max-width.

Si ese eres tú, ¡cámbialo!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

También puede suceder si el nivel de zoom del navegador no es correcto. El zoom de la ventana del navegador debe ser del 100%. En Chrome, use Ctrl + 0para restablecer el nivel de zoom.