html - para - medidas web responsive 2018

¿Por qué mis consultas de medios CSS3 no funcionan en dispositivos móviles?

Question

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

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

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

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

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

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

Answer 1

Asegúrese de que todos los comentarios de CSS usen este marcado /* ... */ - que es el marcado de comentario correcto para css de acuerdo con MDN

Copié las consultas de medios de bootstrap 4 directamente desde sus documentos y cada consulta está etiquetada con el mismo marcado de comentario de estilo de JavaScript // !

Además, el editor de texto IntelliJ me permitió comentar líneas específicas de css en un archivo LESS, pero usé automáticamente // . No es freeware, así que supuse que estaba bien. Hay un menú de preferencias para corregir este comportamiento.

Además, valide su CSS con un validador en línea confiable. Aquí hay uno por W3

Answer 2

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

Answer 3

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

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

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

Answer 4

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

Answer 5

Para mí, he indicado max-height lugar de max-width .

Si ese eres tú, ve a cambiarlo!

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

Answer 6

Sospecho que la palabra clave only puede ser el problema aquí. No tengo problemas para utilizar consultas de medios como esta:

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

Answer 7

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

Answer 8

utilicé bootstrap en un sitio de prensa, pero no funcionó en IE8, utilicé javascript css3-mediaqueries.js pero aún no funcionaba. 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>

css Vincular línea tan simple como la línea anterior.

Answer 9

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