John
Versuch, das CSS eines Elements zu ändern, wenn die Bildschirmauflösung weniger als 960 Pixel beträgt
Mein Code funktioniert nicht, es werden keine Fehler in Firebug angezeigt.
<script type="text/javascript">
jQuery(window).resize(function() {
if (jQuery(window).width() < 960) {
jQuery(".snow").css('display', 'none');
}
});
</script>
ACarter
Sie können dies vollständig mit CSS tun, indem Sie die verwenden @media Befehl.
@media (max-width:960px) { css... } //nothing with screen size bigger than 960px
@media (min-width:960px) { css... } //nothing with screen size smaller than 960px
Sehen Hier
Jason Whitted macht einen guten Punkt, dies ist nur CSS 3, daher funktioniert es nicht mit älteren Browsern (es sollte jedoch mit allen modernen Browsern funktionieren). Sehen Hier für Kompatibilität. Ihre Hauptprobleme werden IE 8 und weniger sein.
Bearbeiten – Geräteauswahl
@media screen { .nomobile { display: block; } } //desktops/laptops
@media handheld { .nomobile { display: none; } } //mobile devices
Oder Sie könnten davon ausgehen, dass mobile Geräte eine geringere Breite haben, und weitermachen.
Dies erfordert einen CSS3-kompatiblen Browser, aber dies ist eine ideale Lösung.
– Jason Whitted
20. Dezember 2012 um 19:53 Uhr
Bitte beachten Sie, dass die JS-Breite und die Breite der Medienabfrage aufgrund der Bildlaufleiste unterschiedlich sind, wenn Sie eine Art flüssig reagierende Website erstellen. Möglicherweise müssen Sie es bei Bedarf synchronisieren
– Huangismus
20. Dezember 2012 um 19:54 Uhr
Ich hätte sagen sollen, dass ich es für eine reaktionsschnelle Website brauche, ich muss das div auf mobilen und Tablet-Geräten ausblenden, wird @media noch funktionieren?
– John
20. Dezember 2012 um 20:04 Uhr
Ja, solange Ihre Reaktionsfähigkeit nur auf der Breite des Browsers basiert. In dem Projekt, an dem ich gerade arbeite, haben wir auch Body-Klassen, die identifizieren, ob der Benutzer auf einem Telefon/Tablet zusieht, aber wir basieren unser Haupt-CSS immer noch auf der Breite. Selbst wenn Sie sich auf dem Desktop befinden und die Größe auf die Telefongröße ändern, sehen Sie die Telefonversion der Website
– Huangismus
20. Dezember 2012 um 20:04 Uhr
Ich habe gerade @media ausprobiert und es funktioniert perfekt. Außerdem habe ich etwas Neues gelernt, Bonus, danke!
– John
20. Dezember 2012 um 20:11 Uhr
Können Sie ein kleines, in sich geschlossenes Beispiel bereitstellen, das gerade genug Code enthält, um das Problem ohne zusätzliche Elemente zu demonstrieren?
– Katie K
20. Dezember 2012 um 19:52 Uhr
Sie können dies mit Medienabfragen tun, aber sehen Sie die Anzeige, dass keine an das Element angehängt wird, sobald es unter 960 liegt? Sind Sie auch sicher, dass Ihre Browsergröße unter 960 liegt?
– Huangismus
20. Dezember 2012 um 19:53 Uhr
rufst du innerhalb von $(function(){}) auf?
– Flachkat
20. Dezember 2012 um 19:53 Uhr
Sind Sie sicher, dass Sie die jQuery-Bibliothek richtig eingebunden haben? Dein Code sollte funktionieren.
– Andreas
20. Dezember 2012 um 19:55 Uhr