Twitter Bootstrap 320andup Implementierung

Ich erstelle eine Website mit der Twitter Bootstrap, aber ich habe festgestellt, dass die Medienabfragen auf nichts unter IE9 (leider mein Zielbrowser) arbeiten. Dies ist der Grund, warum ich den Bootstrap (für das Responsive Scaling Grid) nutzlos benutze.Twitter Bootstrap 320andup Implementierung

Ich erwog die Implementierung von Andy Clarke's 320 and up responsive Boilerplate innerhalb der Bootstrap für die allgemeine bessere allgemeine Unterstützung auf der IE-Seite der Dinge. (Oder ähnliche Vorlagen)

Hat jemand Beispiele dafür gefunden, die online oder auf Github gemacht werden? (ohne SASS, HAML usw. oder speziell für ein CMS erstellt). Ich habe eine Vorstellung davon, wie ich es machen werde, aber ich bin mir nicht sicher, ob es Zeitverschwendung ist und ich würde gerne sehen, ob beide Werkzeuge erfolgreich zusammengezogen werden können.

Quelle

2012-04-02 fitzilla

Medienabfragen [werden von IE9 unterstützt] (http://caniuse.com/#search=media%20queries), was genau funktioniert nicht für Sie? –

Hallo @AndresIlich - ja, IE9 ist in Ordnung. IE7 & 8 ist das Problem :) – fitzilla

IE7 und 8 unterstützen keine Medienabfragen, aber ich denke, ich habe Ihre Frage jetzt. –

@ Fitzilla ... Ich konnte nicht herausfinden, wie Sie eine zusätzliche Kommentare hinzufügen, so dass ich hoffe, Sie finden dies. ich habe gerade überprüft my website in beiden IE7 & IE8-Modus und beide arbeiten eine Ansicht Quelle auf der ursprünglichen Seite -. Sie werden einen zusätzlichen Hack für IE7 & IE8 ... siehe

<!-- Le HTML5 shim, for IE6-8 support of HTML elements --> 
<!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

Dann überprüfen Sie umfasst gegen Mine und ich sehe, ob sie übereinstimmen. Ich glaube, dass die bootstrap-responsive nach der regulären Bootstrap-CSS-Datei sein muss.

Quelle

2012-04-03 19:41:24 Gfw

Hey @gfw - Ja, ich hatte auch das HTML5 Shim enthalten. Ich hatte Probleme, da ich irgendwie ein paar verschiedene Versionen der Datei respond.js verwendete ... Ich benutzte die, die Sie hatten und sie hat sich plötzlich entschieden zu arbeiten. Tolles Zeug, nochmals vielen Dank! – fitzilla

Damit Medienabfragen in älteren Browsern (IE7 und 8) funktionieren, müssen Sie einen Polyfill wie den respond.js im Dokumentkörper einfügen, um diese Techniken zu unterstützen. Habe gerade bemerkt, dass das 320andup-Framework das gleiche Polyfill verwendet, so dass Sie es leicht in Ihr Bootstrap-Projekt einbinden können.

Hier ist eine Testseite, die Sie die Abfragen auf IE7 testen können und 8:

http://chrisjacob.github.com/Respond/

Quelle

2012-04-02 22:01:15

Cheers @AndresIlich, ich war mir der respond.js bewusst, ich war unsicher, ob die einfache Implementierung in meinem Code ausgereicht hätte. Ich nahm an, du hättest * eine andere Art von Medienabfrage machen müssen. – fitzilla

@fitzilla yeah, ich habe deine Frage missverstanden, dachte du meintest nur IE9, aber IE8 und darunter unterstützen keine Medienabfragen. –

Respond.js wird Bootstrap Arbeit für beide IE7 & IE8 machen - zumindest mit den Entwickler-Tools (F12) von IE9. Auf meiner Test-Website (http://ReactiveWebDesign.Net Ich schließe respond.js kurz vor jQuery ... die erste inbegriffen. Js-Datei

Quelle

2012-04-03 00:34:53 Gfw

Danke @Gfw. Gute Arbeit. Nur aus Neugier, warum trennen Sie Ihre Website in so viele individuelle Stylesheets? Sicher wird dies die Ladezeiten beeinflussen? Oder macht das etwas mit den Medienanfragen? Verwenden Sie verschiedene Stylesheets für jede Auflösung oder so? – fitzilla

Die Seite ist ein work in progress, also habe ich nicht angefangen zu kombinieren. Die 2 Bootstrap-CSS-Dateien könnten wahrscheinlich kombiniert werden, ebenso die drei Site-spezifischen Site.css, mainNavWrapper.css & leftNavWrapper.css. Bis die Seite wirklich vollständig ist, macht es einfach, sie auseinander zu halten. Die letzten 3 sind nicht einmal minimiert, aber irgendwann wird es sein. Die einzigen anderen Medienabfragen, die verwendet werden, sind die Umwandlung der Menüs in ausgewählte Anweisungen für mobile Geräte. – Gfw

Hey @Gfw, Ich habe versucht, die Antwort.src.js zu der Datei hinzuzufügen, und ich habe es direkt vor dem Jquery-Tool enthalten.Das Layout der Website ist immer noch festgelegt, wenn ich es in IE8 überprüfe. Irgendwelche Ideen, was ich falsch machen könnte? – fitzilla

Twitter Bootstrap 320andup Implementierung

Antwort

Verwandte Themen