Entrez CSS Media Queries en Chrome Developer Tools

Appuyant sur la touche F12 je peux modifier le CSS des éléments en Chrome. Cependant, je ne peux pas l'entrée de @media screen and (max-width) similaire ici:

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

Lorsque j'appuie sur entrer, elle disparaît tout simplement. Que puis-je faire pour ajouter et supprimer dynamiquement des requêtes de média?

InformationsquelleAutor user1506145 | 2015-01-21

36

Lorsque vous modifiez les styles d'un élément spécifique dans l'inspecteur, c'est comme si vous modifiez l'élément inline style attribut: vous ne pouvez placer déclarations de propriété tels que color: red dans votre exemple. C'est même reflété dans les DOM visualisation elle-même à mesure que vous modifiez un élément de styles. Requêtes médias n'appartiennent pas à des styles en ligne, qu'ils appartiennent à @media règles qui apparaissent seulement dans une bonne feuille de style.

Sur Chrome, vous devrez modifier l'inspecteur de la feuille de style directement dans le but d'inclure vos requêtes de média. Vous pouvez y accéder en allant dans le panneau des Sources et choix de l'inspecteur de la feuille de style.

Car cela implique l'écriture de CSS, vous devez sélectionner l'élément. Vous pouvez généralement obtenir un unique sélecteur CSS de l'élément que vous choisissez en un clic-droit dans le panneau eléments et en choisissant Copier le CSS chemin.

Alors il suffit d'écrire votre CSS:
```
@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}
```
- J'ai compris cette partie, mais est-il un moyen pour afficher un aperçu des modifications? Après avoir édité le fichier par le biais des Outils de développement Chrome, il y a un astérisque (*) à côté du nom de fichier. Par ailleurs, la page web n'est pas sur localhost; il en est une qui est déjà en ligne à l'adresse discussions.udacity.com/t/lesson-2-media-query/22206
- Les modifications sont appliquées à la volée comme vous le modifier.
- Vous avez raison. J'étais dans le "basculer l'appareil en mode" où vous pouvez choisir la résolution des appareils et des trucs et ça ne fonctionne pas là.
- Notez que le "inspecteur-stylesheet" est disponible dans votre panneau des Sources uniquement après avoir effectué quelques modifications personnalisées pour le CSS soi-même (ex. l'ajout de votre propre [+] Nouvelle Règle de Style)
InformationsquelleAutor BoltClock

Vous pouvez toujours ajouter le CSS dans les balises de style dans la section d'en-tête. Il suffit d'éditer le code HTML en cliquant-droit sur le code html et sélectionnez "Éditer le code 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>

InformationsquelleAutor Choonkies

4

Vous pouvez utiliser Nouvelle Règle de Style.
Cliquez sur le symbole Plus (+) d'ailleurs .cls.

et puis, vous verrez qu'il génère de la nouvelle classe. Maintenant, cliquez sur inspecteur de la feuille de style.

Vous serez rediriger vers des Sources d'Onglet avec presque vide de la feuille de style. Maintenant, vous pouvez mettre les Media Queries là.

InformationsquelleAutor Daryl Malibiran
0

J'ai eu le même problème et enfin compris que lorsque j'ai été saisie par exemple:
```
@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}
```
ma taille de l'écran était en fait plus que 767px. Alors, quand j'appuie sur entrée, il a disparu et semble ne pas fonctionner. Mais ce que j'ai réalisé, c'est quand j'ai ajusté la taille de l'écran de mon navigateur pour ci-dessous 768px, j'ai vu la requête de média dans les styles.

InformationsquelleAutor rmsimpsonau

Vous devez vous connecter pour publier un commentaire.