other - Ingrese las consultas de medios CSS en Chrome Developer Tools

https://chrome:inspect

Question

Presionando F12 puedo cambiar instantáneamente CSS de elementos en Chrome. Sin embargo, no puedo ingresar la pantalla @media y (ancho máximo) similar a aquí:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Cuando presiono enter simplemente desaparece. ¿Qué puedo hacer para agregar dinámicamente y eliminar consultas de medios?

Answer 1

Puedes usar la Nueva Regla de Estilo . Haga clic en el símbolo Más ( + ) junto a .cls. Ver captura de pantalla

y luego, verás que genera nueva clase. Ahora haga clic en inspector-hoja de estilo . Ver captura de pantalla Será redirigido a la pestaña Fuentes con una hoja de estilo casi en blanco. Ahora, puedes poner consultas de medios allí. Ver captura de pantalla

Answer 2

Siempre puede agregar el CSS dentro de las etiquetas de estilo en la sección de encabezado. Solo edite el HTML haciendo clic derecho en el html y seleccione "Editar como HTML". Por ejemplo,

<style>
    @media screen and (min-width: 0px) and (max-width: 400px) {
        body {
            background-color: red;
        }
    }
    @media screen and (min-width: 401px) and (max-width: 599px) {
        body {
            background-color: green;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background-color: blue;
        }
    }
</style>

Answer 3

Tuve el mismo problema y finalmente me di cuenta de que cuando ingresaba, por ejemplo:

@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}

mi tamaño de pantalla era en realidad más de 767px. Así que cuando presioné Enter, desapareció y pareció no funcionar. Pero me di cuenta de que cuando ajusté el tamaño de la pantalla de mi navegador por debajo de 768px, vi la consulta de medios en los estilos.

Answer 4

Cuando edita los estilos para un elemento específico en el inspector, es como si estuviera editando el atributo de style línea del elemento: solo puede colocar declaraciones de propiedades como color: red en su ejemplo. Esto incluso se refleja en la visualización de DOM en sí al editar los estilos de un elemento. Las consultas de los medios no pertenecen a los estilos en línea, sino que pertenecen a las reglas de @media que aparecen solo en una hoja de estilo adecuada.

En Chrome, deberá editar la hoja de estilo del inspector directamente para incluir sus consultas de medios. Puede acceder a él yendo al panel Fuentes y seleccionando inspector-stylesheet.

Dado que esto implica escribir CSS, deberá seleccionar el elemento. Por lo general, puede obtener un selector de CSS único para el elemento que elija haciendo clic con el botón derecho en el panel Elementos y seleccionando Copiar ruta CSS.

Entonces simplemente escribe tu CSS:

@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}