Pytanie jeśli rozdzielczość ekranu jest mniejsza niż x dopisz css


Próbujesz zmodyfikować css elementu, jeśli rozdzielczość ekranu jest mniejsza niż 960px

mój kod nie działa, nie widzę żadnych błędów w firebugu.

<script type="text/javascript">
jQuery(window).resize(function() {
  if (jQuery(window).width() < 960) {
    jQuery(".snow").css('display', 'none');
  }
});
</script>

12
2017-12-20 19:50


pochodzenie


Czy możesz podać mały samodzielny przykład, który zawiera tylko tyle kodu, aby zademonstrować problem, bez żadnych dodatkowych? - KatieK
możesz to zrobić za pomocą zapytań o media, ale czy widzisz, że wyświetlacz nie jest dołączany do elementu raz poniżej 960? Jesteś również pewien, że twój rozmiar przeglądarki jest poniżej 960? - Huangism
dzwonisz z $ (function () {})? - Flat Cat
Czy na pewno poprawnie umieściłeś bibliotekę jQuery? Twój kod powinien zadziałać. - Andrew


Odpowiedzi:


Możesz to zrobić całkowicie za pomocą CSS używając @media dowództwo.

@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width:960px) { css... } //nothing with screen size smaller than 960px

Widzieć tutaj

Jason Whitted ma rację, jest to tylko CSS 3, więc nie będzie działać ze starszymi przeglądarkami (powinien jednak działać ze wszystkimi nowoczesnymi przeglądarkami). Widzieć tutaj dla kompatybilności. Twoje główne problemy to IE 8 i mniej.

Edytuj - wybór urządzenia

@media screen { .nomobile { display: block; } } //desktops/laptops

@media handheld { .nomobile { display: none; } } //mobile devices

Lub możesz założyć, że urządzenia mobilne będą miały mniejszą szerokość i dalej.


47
2017-12-20 19:52



Wymaga to przeglądarki zgodnej z CSS3, ale jest to idealne rozwiązanie. - Jason Whitted
Należy pamiętać, że jeśli robisz coś w rodzaju płynnie reagującej strony internetowej, szerokość js i szerokość zapytań o media są różne ze względu na pasek przewijania. W razie potrzeby konieczne może być zsynchronizowanie - Huangism
Powinienem powiedzieć, że potrzebuję go do stworzenia responsywnej strony, muszę ukryć div na urządzeniach mobilnych i tabletach, czy @media będzie działać nadal? - john
tak, o ile twoja responsywność opiera się tylko na szerokości przeglądarki. W projekcie, nad którym pracuję teraz, mamy również klasy ciała, które identyfikują, czy użytkownik ogląda na telefonie / tablecie, ale wciąż bazujemy na głównych css na szerokość. Więc nawet jeśli jesteś na komputerze i zmieniasz rozmiar na telefon, zobaczysz wersję telefonu tej witryny - Huangism
po prostu wypróbowałem @media i działa idealnie plus nauczyłem się czegoś nowego, bonusu, thx! - john