Twitter Bootstrap - Comment changer la classe css basé sur @media défini largeurs
C'est ma première question ici, mais je voudrais juste dire que ce site m'a aidé un nombre incalculable de fois au cours de mes années. Je suppose que j'ai obtenu à l'étape où j'ai mes propres questions à poser!
Désolé si la question n'est pas claire, je vais essayer de préciser: j'ai attribué une transition à certains de mes éléments, de sorte que quand ils sont planait sur elles s'élèvent vers le haut (c'est à dire; .example:hover {margin-top: -25px}
).
Vous pouvez voir où j'ai appliqué ce sur cette page.
Passez la souris sur les éléments sous le "Coming Soon" zone d'alerte (c'est à dire; "Pixel Perfect Dessins", "Magnifiquement Propre Code" & "de Plus de 5 ans d'Expérience").
Tous fonctionne bien, cependant, vous remarquerez que lorsque la fenêtre du navigateur est re-taille assez petit donc les éléments sont empilés verticalement (je crois que c'est @media (max-width: 767px)
), le hover effet ne semble pas tout à fait propre. Je voudrais supprimer l'effet tout à fait quand le site s'affiche de cette façon (pour les appareils mobiles).
Donc la question est comment puis-je modifier les propriétés de la classe en fonction de la largeur du navigateur? Je voudrais enlever le margin-top lors de son survol lors de l'affichage d'un appareil mobile (ie; < 767px), mais de le garder là vu normalement.
Grâce
Vous devez vous connecter pour publier un commentaire.
Seulement une petite chose que vous avez à ajouter.
Une chose de plus si l'on travaille sur de petits appareils quel est l'avantage d'utiliser des propriétés de transition parce que nous ne voulons pas de changement/d'effet sur cette fenêtre. Ajoutez à cela aussi pour le rendu rapide sur les navigateurs mobiles.
Juste envelopper le CSS correspondant à la règle avec
@media
comme ceci:Remarque que je suis avec min-width - ce exclut la règle de "téléphone" voir.
La sytling est à venir à partir de docs.css où vous avez:
Comme @dequis noté, @media queries sont la voie à suivre. Depuis l'effet hover ne fonctionne pas si bien quand les 3 colonnes sont empilés sur un écran mobile, une possibilité est que vous pouvez supprimer la verticale de la transition et de la remplacer par une bande horizontale, avec quelque chose comme ce qui suit ajouté à docs.css:
Il est possible que cela pourrait avoir besoin de quelques ajustements une fois en place, la pensée qui sera facile si c'est nécessaire.
Bonne chance!