Entrar en Consultas de Medios CSS en Herramientas para Desarrolladores de Chrome

Pulsando F12 me instante puede cambiar el CSS de los elementos en Cromo. Sin embargo, no puedo entrada de @media screen and (max-width) similares a los aquí:

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

Cuando yo presione entrar simplemente desaparece. ¿Qué puedo hacer para agregar dinámicamente y eliminar preguntas de los medios?

Entrar en Consultas de Medios CSS en Herramientas para Desarrolladores de Chrome

InformationsquelleAutor user1506145 | 2015-01-21

4 Kommentare

  1. 37

    Al editar los estilos de un elemento específico en el inspector, es como si estuviera editando el elemento inline style atributo: sólo puede colocar las declaraciones de propiedad, tales como color: red en su ejemplo. Esto se refleja incluso en el DOM de la visualización de sí mismo como editar un elemento de estilos. Consultas de medios de comunicación no pertenecen a estilos en línea, a la que pertenecen en @media reglas que aparecen sólo en una adecuada hoja de estilos.

    En Chrome, usted tendrá que editar el inspector de la hoja de estilos directamente en el fin de incluir sus consultas de medios de comunicación. Se puede llegar a ella por ir a las Fuentes del panel y la elección de inspector de la hoja de estilos.

    Ya que esto implica la escritura de CSS, usted tendrá que seleccionar el elemento. Usted puede (suele) obtener un único selector CSS para el elemento que elegir haciendo clic derecho en el panel de Elementos y elegir Copiar CSS camino.

    A continuación, escriba la CSS:

    @media screen and (max-width: 300px) {
        /* selector for your element */ { color: red; }
    }
    • Me imaginé que fuera parte, pero hay una manera de ver los cambios? Después de editar el archivo a través de Herramientas para Desarrolladores de Chrome, hay un asterisco » * » al lado del nombre de archivo. Por cierto, la página web no está en localhost; es uno que ya está en línea en discussions.udacity.com/t/lesson-2-media-query/22206
    • Los cambios se aplican sobre la marcha a medida que se edita.
    • Estás en lo correcto. Yo estaba en el «botón de modo de dispositivo», donde puede elegir la resolución de los dispositivos y a las cosas, y no trabajo allí.
    • Tenga en cuenta que el «inspector-stylesheet» se convierte en disponible en las Fuentes del panel después de haber hecho algunos personalizado cambio en el CSS a sí mismo (es decir. añade tu propia [+] Nueva Regla de Estilo)
  2. 8

    Puede utilizar Nueva Regla de Estilo.
    Haga clic en el símbolo Más (+) además .cls.

    Entrar en Consultas de Medios CSS en Herramientas para Desarrolladores de Chrome

    y, a continuación, usted verá que genera la nueva clase. Ahora haga clic en inspector-stylesheet.

    Entrar en Consultas de Medios CSS en Herramientas para Desarrolladores de Chrome

    Usted será redireccionado a la Pestaña de Fuentes con casi en blanco de la hoja de estilos. Ahora, usted puede poner preguntas de los Medios en no.

    Entrar en Consultas de Medios CSS en Herramientas para Desarrolladores de Chrome

  3. 6

    Siempre puede agregar el CSS dentro de las etiquetas de estilo en la sección de la cabeza. Acaba de editar el código HTML haciendo clic derecho en el html y seleccione «Editar 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>
  4. 0

    Yo tenía el mismo problema y finalmente descubrió que cuando yo estaba entrando por ejemplo:

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

    mi el tamaño de la pantalla era en realidad más que 767px. Así que cuando he pulsado intro, desaparecido y parecía no funcionar. Pero lo que me di cuenta es de que cuando me ajustar el tamaño de la pantalla de mi navegador para que a continuación 768px, vi a la consulta de medios de comunicación en los estilos.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea