Comment déboguer le code css à l'intérieur de différentes requêtes de média avec Firebug et outils de développement Chrome?
Comment déboguer le code css pour l'orientation:portrait en Chrome Developer tools?
Ce que jamais j'écris à l'intérieur de (orientation:portrait)
ne pouvez pas modifier à la volée à partir de Firebug et Chrome Developer tools. Il montre toujours la normale Propriétés.
/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}
OriginalL'auteur Jitendra Vyas | 2011-07-27
Vous devez vous connecter pour publier un commentaire.
"Un navigateur ou un appareil détermine l'orientation de l'écoute de la largeur et de la hauteur de la fenêtre. Si la hauteur est plus grande que la largeur de la fenêtre est en mode portrait. Si la largeur est plus grande que la hauteur, il est en mode paysage."
Plus d'infos: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Fondamentalement, vous avez besoin de redimensionner la fenêtre de votre navigateur pour le portrait d'orientation css pour prendre effet.
Si vous ouvrez firebug dans la fenêtre du navigateur ie. firebug est au fond, la hauteur de la fenêtre du navigateur changements, ce qui entraîne l'orientation pour devenir paysage, donc vous perdez votre portrait styles. Pour les deux firebug et outils de développement chrome, essayez de lancer les outils dans leur propre fenêtre de votre navigateur, la taille n'est pas affectée.
PS. Je voudrais utiliser Firebug pour ce genre de montage parce que vous pouvez voir clairement le css le changement que vous redimensionner le navigateur.
OriginalL'auteur marissajmc
Depuis récemment (Chrome 17), Chrome DevTools affichage de la requête de média contexte affectant tous appariés règle CSS (si présent). Alors que l'implémentation actuelle ne met pas à jour les styles sur requête de support à l'évaluation des changements (vous avez besoin de re-sélectionner le nœud affecté), http://webkit.org/b/74292 pistes de la demande de mise à jour dynamique de la correspondance de règles CSS.
OriginalL'auteur Alexander Pavlov
Comme on dit ci-dessus, vous pouvez redimensionner la fenêtre de votre navigateur pour avoir la hauteur, être supérieure à la largeur alors que les médias portrait est vrai.
Vous pouvez utiliser cette url http://robnyman.github.com/matchmedia/ afin de redimensionner le navigateur, actualisez la page et vous verrez si la détection de vrai pour le portrait.
OriginalL'auteur Santiago Rebella
Enfin maintenant Il est possible de faire dans Firefox 16 réactif mode. Vérifier la vidéo Youtube ici http://www.youtube.com/watch?v=t07cLJhJkjQ
Upvotes sont pour des réponses à la question d'origine
OriginalL'auteur Jitendra Vyas