🥇 Torne o Chrome DevTools responsivo usando consultas de mídia

Recentemente, escrevi CSS para tornar o Chrome DevTools responsivo. Você pode modificar o CSS do DevTools modificando o Custom.css

Usando consultas de mídia, reuni pontos de interrupção nos quais escondi minha guia menos importante na barra de ferramentas.

Por exemplo;

/* When DevTools width is 624 pixels or less */
@media all and (max-width: 624px) and (min-width: 0px) {

    /* Hide the audits tab */
    #-webkit-web-inspector #toolbar .toolbar-item.audits {
        display: none !important;
    }
}

Meu arquivo CSS completo para DevTools com consultas de mídia: https://gist.github.com/Dayjo/7050186

Também escrevi um blog sobre ele com um pouco mais de informações; Tornar o Chrome DevTools responsivo

Related Posts