In Anbetracht, dass SingularityGS standardmäßig folgt ein Mobile-First-Ansatz, wie lösen Sie das Problem in IE8, die die mobile Version von allem zeigt, die von Medien-Abfragen abhängt?Wie verwenden Sie Mobile-First in IE8
Haben Sie eine Lösung dafür gefunden oder muss ich zuerst zum Desktop wechseln?
Danke.
Statt um IE 7 und 8 Unzulänglichkeiten arbeiten, können Sie IE 7-8 machen unterstützen tatsächlich Abfragen Medien!
Ich benutze die tolle Respond.js Polyfill, um Medienabfragen in IE 7 und 8 zu ermöglichen. Fügen Sie einfach diesen Code zu Ihrem HTML <head> hinzu und Sie sind gut zu gehen!
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Vielleicht wollen Sie auch CSS3-Selektoren in IE 7 und 8, so dass Sachen wie .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } funktionieren würde, ermöglichen.
Sie benötigen die Selectivizr Polyfill. Um mit Selectivizr zusammenzuarbeiten, sollte Selectivizr von Version 1.0.3b oder später sein (welches aus irgendeinem Grund noch nicht als stabil for two years veröffentlicht wurde) und sollte geladen sein, bevor Reagieren. Selectivizr benötigt auch NWMatcher oder eine Alternative, die davor geladen werden soll. Also die richtige Reihenfolge ist dies:
<!--[if lt IE 9]>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Und Sie sollten völlig auch haben die html5shiv polyfill (aka html5shim) auf IE 7-8 die grundlegendsten CSS3 Sachen unterstützen zu machen.
So sieht meine ultimative Satz von IE 7-8 polyfills wie folgt aus:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
Hinweis: Sie mit denen, wie es nicht IE9.js in Kombination verwenden IE 8 Einfrieren machen.
Ich benutze Breakpoint eingebaute No Query Fallback-Unterstützung in Kombination mit IE Klassen auf meinem HTML-Tag oder Modernizr Tests für Media Query-Unterstützung.
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks
Danke. Ich habe noch nicht Sass oder Modernisr benutzt, also bin ich mir nicht sicher, ob ich das umsetzen könnte. Wenn Sie gute Tutorials oder Erklärungen zur Verwendung wissen, schreiben Sie bitte hier. Ich lese weiter darüber, wie es so toll ist und spart Zeit, habe aber keine Ahnung, wie man es benutzt oder aufstellt. –
Hosten Sie diese .js-Dateien dann lokal? Können Sie über ein CDN mit ihnen verlinken? Danke, –
Sie können anhand der Skript-Tags feststellen, dass sie auf einem CDN gehostet werden. Sie können den HTML-Code kopieren und ohne Änderungen in Ihrem Projekt verwenden. –
Bitte verwenden Sie nicht Respond.js oder Selectivizr. Sowohl Respond.js als auch Selectivizr erzeugen für jedes Element, mit dem sie arbeiten müssen, zusätzliche HTTP-Anforderungen und fügen dem kritischen Pfad eine Erweiterung hinzu. Respond funktioniert nur mit PX-basierten Min/Max-Wide-MQs, und Selectivizr ist so langsam, dass ich IE8 mit einer nicht unzumutbaren Anzahl von Items abstürzen ließ, mit denen es arbeiten musste. Arbeiten Sie stattdessen mit den Einschränkungen der von Ihnen unterstützten Browser und verwenden Sie Feature-Erkennung und Klassen für die Fallback-Unterstützung. – Snugug