Las consultas de medios de emulación del modo de dispositivo Chrome no funcionan

Question 1

Por alguna razón, el modo de emulación de dispositivo no lee mis consultas de medios. Funciona en otros sitios, incluidos mis propios sitios que hice con bootstrap, pero no funciona en las consultas de medios que estoy usando desde cero (al hacer clic en el botón de consultas de medios, el botón se vuelve azul pero no se muestran las consultas de medios). Archivo de prueba a continuación. ¿Es esto un error en Chrome o hay algo que necesito cambiar en mi archivo?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

Question 2

Solucioné este problema agregando una metaetiqueta a mi página:

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

ACTUALIZACIÓN (diciembre de 2019):

Parece que también puede necesitar establecer la escala inicial y la escala mínima, así:

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

Question 3

La respuesta aceptada no lo hizo por mí, tuve que agregar minimum-scale=1también.

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

Question 4

La emulación de dispositivos en Chrome sigue siendo un WIP. Para ser honesto, creo que lo enviaron a Chrome demasiado pronto. Intente usar Canary (el navegador beta de Chrome) para probar la emulación, encuentro que funciona mucho mejor que el de Chrome.

Question 5

Funciona para mi.

Simplemente coloque una metaetiqueta de ventana gráfica en la sección del encabezado de su página. Ver ejemplo:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Question 6

Incluya esta metaetiqueta en su código:

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Expandir fragmento

Question 7

Seguí teniendo el mismo problema hasta que noté que si tengo más de una implementación para el mismo conjunto de reglas, dependiendo del tamaño de la pantalla:

Especifique el ancho mínimo y máximo para la misma consulta de medios para que no se sobrescriba con la siguiente:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

O establezca al menos un punto de interrupción para todos:

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}