Twitter Bootstrap - Jak zmienić klasę css na podstawie @media zdefiniowanych szerokości

Question

To jest moje pierwsze pytanie tutaj, ale chciałbym tylko powiedzieć, że ta strona pomogła mi niezliczoną ilość razy w ciągu moich lat. Sądzę, że doszedłem do etapu, na którym mam własne pytania!

Przepraszam, jeśli pytanie nie jest jasne, postaram się opracować: Przydzieliłem przejście do niektórych z moich elementów, tak że gdy są one podwieszone, wznoszą się w górę (tj. .example:hover {margin-top: -25px}).

Możesz zobaczyć, gdzie zastosowałem to na stronie this.

Umieść wskaźnik myszy nad elementami pod polem "Wkrótce" (np. "Pixel Perfect Designs", "Pięknie czysty kod"): & "Ponad 5 lat doświadczenia").

Wszystko działa dobrze, ale zauważysz, że gdy okno przeglądarki zostanie ponownie wystarczająco małe, aby elementy były ułożone pionowo (uważam, że jest to @media (max-width: 767px)), efekt unoszący się nie wydaje się być czysty. Chciałbym całkowicie usunąć efekt, gdy strona jest wyświetlana w ten sposób (na urządzenia mobilne).

Pytanie więc, w jaki sposób mogę zmienić właściwości klasy na podstawie szerokości przeglądarki? Chciałbym usunąć margines-górny, gdy jest zawieszony, gdy wyświetlany jest na urządzeniu mobilnym (tj. < 767px), ale powinien być przechowywany w zwykłym widoku.

Dzięki

Answer 1

Tylko niewielka rzecz, którą musisz dodać.

@media (max-width: 767px) { 
    .shift:hover { 
    margin-top: 0; 
    } 
} 

Jeszcze jedno, jeśli pracuje na małych urządzeniach, co jest zaletą w użyciu właściwości przejścia ponieważ nie chcemy żadnych zmian/efekt tego widoku. Dodaj to również do szybkiego renderowania w przeglądarkach mobilnych.

@media (max-width: 767px) { 
    .shift { 
    transition:none; 
    -webkit-transition:none; 
    -moz-transition:none; 
    } 
} 

Answer 2

Wystarczy owinąć odpowiednią regułę CSS z @media tak:

@media (min-width: 768px) { 
    .example:hover { 
     margin-top: -25px; 
    } 
} 

Zauważ, że używam min-width - tym wyklucza reguły z "telefonu" widzenia.

Answer 3

sytling pochodzi docs.css gdzie trzeba:

.shift:hover { 
margin-top: 40px !important; 
} 

Jak @dequis zauważyć, @media zapytania są do zrobienia. Ponieważ efekt unoszący się nie działa tak dobrze, gdy 3 kolumny są układane w stos na ekranie mobilnym, jedną z możliwości jest usunięcie przejścia pionowego i zastąpienie go przejściem poziomym, z czymś takim, jak to, które dodano do docs.css:

@media (max-width: 767px) { 
.shift:hover { 
margin-top: 0 !important; /* it's possible this might need some fine-tuning */ 
margin-right: -20px; 
} 

} 

Możliwe, że może wymagać pewnych poprawek, gdy już będzie na miejscu, uważam, że będzie to łatwe, jeśli będzie potrzebne.

Powodzenia!