web-dev-qa-db-fra.com

Saisir des requêtes de média CSS dans les outils de développement de Chrome

En appuyant sur F12, je peux changer instantanément le CSS des éléments dans Chrome. Cependant, je ne peux pas saisir l’écran @media et (max-width) comme ici:

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

Quand j'appuie sur entrer, il disparaît simplement. Que puis-je faire pour ajouter et supprimer dynamiquement des requêtes multimédia?

enter image description here

cssmedia-queriesgoogle-chrome-devtools
23
user1506145

Lorsque vous modifiez les styles d'un élément spécifique dans l'inspecteur, vous modifiez l'attribut inline style de l'élément: vous pouvez uniquement placer des déclarations de propriété telles que color: red dans votre exemple. Cela se reflète même dans la visualisation DOM elle-même lorsque vous modifiez les styles d'un élément. Les requêtes multimédias n'appartiennent pas aux styles en ligne, mais aux règles @media qui apparaissent uniquement dans une feuille de style appropriée.

Sous Chrome, vous devez modifier directement la feuille de style de l'inspecteur afin d'inclure vos requêtes multimédia. Vous pouvez y accéder en accédant au panneau Sources et en choisissant l'inspecteur-feuille de style.

Comme il s’agit d’écrire CSS, vous devrez sélectionner l’élément. Vous pouvez (généralement) obtenir un sélecteur CSS unique pour l'élément que vous choisissez en cliquant dessus avec le bouton droit de la souris dans le panneau Éléments et en choisissant Copier le chemin CSS.

Ensuite, écrivez simplement votre CSS:

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

Vous pouvez toujours ajouter le CSS dans les balises de style dans la section head. Il suffit de modifier le code HTML en cliquant avec le bouton droit de la souris sur le code HTML et en sélectionnant "Modifier en tant que HTML". Par exemple,

<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>
5
Choonkies

Vous pouvez utiliser Nouvelle règle de style . Cliquez sur le symbole Plus (+) en plus de .cls . Voir la capture d'écran

et ensuite, vous verrez qu'il génère une nouvelle classe. Maintenant, cliquez sur inspector-stylesheet . Voir la capture d'écran Vous serez redirigé vers l'onglet Sources avec une feuille de style presque vierge. Vous pouvez maintenant y insérer des requêtes multimédia . Voir la capture d'écran

1
Daryl Malibiran

J'ai eu le même problème et j'ai finalement compris que lorsque j'entrais, par exemple:

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

ma taille d'écran était en réalité plus de 767px. Donc, quand j'ai appuyé sur entrer, il a disparu et semblait ne pas fonctionner. Mais ce que j’ai compris, c’est que lorsque j’ai ajusté la taille de l’écran de mon navigateur à moins de 768 pixels, j’ai vu la requête multimédia dans les styles.

0
rmsimpsonau