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


183

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?


3
¿Qué teléfono móvil es? Media Queries es una nueva característica en CSS, no todos los navegadores de teléfonos móviles lo admiten ...
Sparky

1
iPhone 4 y también estoy probando en un teléfono Android (2.2 Froyo) con una resolución de 320 x 480.
redconservatory

En realidad, cambié a la siguiente consulta de medios en el iPhone 4 y funciona (pero tengo que cambiar mi CSS para acomodar la resolución más alta) @media solo pantalla y (-webkit-min-device-pixel-ratio: 2) {}
redconservatory

Finalmente me di cuenta de que me estaba perdiendo pxen @media (max-width: 320px).
Ryan

en mi caso, fue porque la consola del desarrollador de Chrome estaba abierta, por lo tanto, la altura no era lo que estaba pensando
Rabolf

Respuestas:


476

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 ...


59
En realidad <meta name = "viewport" content = "width = device-width, initial-scale = 1">
Lukas Lukac

44
8 años después y esto sigue siendo útil. También omití la metaetiqueta y no pude obtener consultas de medios para trabajar en un proyecto. Etiqueta de
viewport

1
9 años después, sigue siendo muy útil. No puedo creer que estaba falsificando eso
Breno Baiardi

@LukasLukac ¿por qué es eso?
Jonesopolis

68

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;
    }
}

55
De hecho, tenga sus estilos CSS apilados en orden decreciente del tamaño estándar al más pequeño. Las reglas aún se aplican si tiene todas sus consultas de medios en el mismo archivo.
Phil Andrews

1
Funciona para mí incluso si no tengo una declaración CSS estándar para dicha clase.
Mason

Esto resolvió mi problema. Muchas gracias ... Pasé por alto la posibilidad de que mi CSS se sobrescribiera.
pmcg521

20

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) { }


20

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.


12

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) {}

1
Es por eso que tenemos validadores CSS. Esto no es relevante para este problema en particular porque el OP ya señala que las consultas de medios de hecho funcionan en navegadores que no son móviles.
cimmanon

44
Todavía encontré esto útil ya que era el problema en mi caso
Loren Shqipognja

4

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;
   }
}

Ese es el error que estaba cometiendo. Gracias.
VorganHaze

4

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)


¡Gracias! Aunque estaba mirando todos los ejemplos, ¡nunca me di cuenta de que había olvidado el px!
marzo

2

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).


2

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?


2

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.


1
OP ya está utilizando el marcado de comentario correcto, como se demostró en la publicación .
TylerH

En realidad, si pasa el cursor sobre el botón de votación negativa, verá exactamente para qué sirven . Aparte de eso, los votos negativos son 1) anónimos y 2) no curricán. Además, flamear a alguien es llamar a no la forma de hacer que cambie algo que crees que hizo.
TylerH

¡Oh mi! Salvaste mi día.
límite

2

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" />


1

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){
}

0

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.


Echaré un vistazo al CSS nuevamente, gracias ... bueno saber que funciona en algo.
redconservatory

0
@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;
}

77
agregue alguna explicación a su código, que muestre cómo resuelve el problema; esto ayudará a otros en el futuro, y es más probable que su respuesta sea votada
Our Man in Bananas

2
Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.
Ferrybig

0

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;
        }
    }

0

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.


1
Esto no debería haber sido rechazado. ¡Esta fue la respuesta a mi frustrante problema!
Amir Almusawi
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.