respond.js einrichten tutorial

Ich finde nicht die info irgendwo auf, genau wie setup respond.js.

Entpackt ich in htdocs - ist das richtig? Oder muss ich nur brauche respond.min.js in htdocs?

Dann verweisen Sie einfach auf die Datei wie folgt ein...

<script src="respond.min.js"></script>

Derzeit habe ich diese in meinem Kopf Abschnitt, versucht haben, bevor und nachdem meine media queries, die noch KEIN stylesheet verwendet wird.

Gibt es ein tutorial überall auf, genau wie Sie einrichten resonse.js als ich habe keine Ahnung, ob ich etwas falsch machen oder ob ein anderes problem vorliegt.

Jede Hilfe wäre sehr geschätzt, meine Website ist ENDLICH fertig, aber ich don t wollen es live zu gehen ohne media queries und derzeit, wenn ich mit media queries, keine stylseheet geladen wird, alle im IE8.

Dank

Dies ist mein Aktueller code;

<!DOCTYPE HTML>
<html lang="en">
    <head>
            <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://localhost/respond.min.js"></script>
<![endif]-->

        <meta charset="UTF-8">
            <link type="text/css" rel="stylesheet"  media="screen and (min-device-width:600px) and (max-device-width:1024px)" href="http://localhost/oldScreen.css">
            <link type="text/css" rel="stylesheet"  media="screen and (min-device-width:1025px)" href="http://localhost/home.css">


                <title>Eastbourne Netball League[Home] </title>
    </head>
  • wenn response.min.js ist im gleichen Ordner wie deine html Datei, sollte es in Ordnung sein. Wenn Sie entpackt ihn, vielleicht ist es erstellt einen Unterordner. In diesem Fall sollte es <script src="subfoldername/response.min.js"></script>
  • Nun, es kommen sin einen Ordner mit vielen Unterordnern und Dateien, aber ther eis keine Erklärung, was man mit diesen Dateien. Alles in htdocs, ich habe versucht zu verlassen response.min.js in dessen Ordner/Unterordner und die darauf verweisen, voll, und haben versucht, einfach einfügen es auf seine eigene in htdocs und Referenzierung wie oben. Nichts passiert
  • Wenn Sie sagen "nichts passiert", heißt es, es kann nicht die Datei finden? Oder es bedeutet nur, dass Ihr media queries nicht funktionieren?
  • auch die media-queries arbeiten ohne response.js in chrome, IE9 etc, sondern einfach nur, indem er Sie, es bedeutet, dass wenn ich im IE8, NICHT-stylesheet ausgeführt werden, es ist einfach nur html. Daher, mit Hilfe von response.js ich sollte in der Lage sein, um meine vorhandenen media queries und sogar IE8 zu wählen Sie eine Datei: je nach Bildschirm-Größe. Allerdings habe ich keine Idee, was das problem ist, aber das problem bleibt genau das gleiche wie vorher ich fand respond.js media queries funktionieren in chrome, IE9, FF, aber KEIN stylesheet verwendet wird, im IE8. Dies ist das worst-case-Szenario!
  • In der Developer-Tool-panel (auf jedem aktuellen browser), sehen Sie ein 404 Fehler? (oder irgendwelche javascript-Fehler in der Konsole)
  • Nein, und es erscheint im firebug als ob es funktioniert. Ich habe die html5-shim-Skript auch funktioniert, und haben versucht, die respond.js script-tags drin, auch nicht mit Glück
  • irgendwelche anderen Ideen, mit meinem Latein echt am Ende hier!

InformationsquelleAutor DJC | 2014-02-19
  1. 3

    In Ordnung, da die Datei geladen ist, das problem kommt von einem dieser 2 Punkte:

    Aus der Dokumentation:

    • Handwerk Ihre CSS-Datei mit min - /max-width-media queries, um die Anpassung Ihres Layouts von mobile (erste) den ganzen Weg bis zum desktop
      @media screen and (min-width: 480px){
      ...Formatvorlagen für 480px und gehen hier
      }

    • Referenz der respond.min.js Skript (1 min/Gzip) nachdem alle Ihre CSS - (der früher, es läuft, desto größer ist die chance IE-Benutzer nicht sehen, ein Blitz der un-Medien würden die Inhalte)

    Meine Vermutung ist der zweite Punkt 🙂

    Ich hoffe, es hilft.

    [Bearbeiten]

        <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet"  media="screen and (min-width:600px) and (max-width:1024px)" href="http://localhost/oldScreen.css">
    <link type="text/css" rel="stylesheet"  media="screen and (min-width:1025px)" href="http://localhost/home.css">

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://localhost/respond.min.js"></script>
    <![endif]-->

    <title>Eastbourne Netball League[Home] </title>
</head>

    Wenn dies nicht funktioniert, setzen Sie es auf diese Weise in Ihrem CSS-Datei:

    @media {min-width:600px) and (max-width:1024px) {

    /* your css here */

}

@media {min-width:1025px) {

    /* your css here */

}

    Daher, Sie können sogar alle Ihre CSS-Datei in der gleichen Datei

    • Ok also ich habe meinen aktuellen code oben. Beachten Sie, dass ich versucht habe den code mit dem script-src für respond.js nach den CSS-media-queries, mit kein Glück. Ich habe auch versucht, es nicht innerhalb des <!--[if lt IE 9]> sowohl vor als auch nach der CSS-styesheet Aufrufe und noch keine CSS-Datei aufgerufen wird, im IE8.
    • Versuchen Sie, meine Lösung, wenn es nicht funktioniert, bedeutet dies, dass respond.js unterstützt nicht die media Eigenschaft. Sie haben, um die media queries innerhalb der CSS-Datei wie habe ich soeben in meiner Antwort.
    • Oder vielleicht Sie nicht unterstützen min-device-width, haben Sie versucht min-width statt?
    • danke für die Hilfe, aber noch eine Frage - wie kann ich die Referenz der CSS-Dateien, das heißt, wie soll es wissen, die man zu Holen, wenn ich nicht einschließlich der min/max-width im HTML?
    • Es Lesen würden beide Dateien, aber wenden Sie nur den Stil in die richtige @media Abfrage. Aber wie ich schon sagte, Sie können sogar legen Sie Sie alle in der gleichen css-Datei.
    • wow. OK. Das Letzte hat es geschafft! Ich kann Ihnen nicht genug danken für Ihre Beharrlichkeit. Aus Interesse, da ich keine Möglichkeit zum testen auf einem anderen Bildschirm heute Abend - wie funktioniert das min-width/max-width vergleichen, um min/max-device-width?
    • Sie sind willkommen, vergessen Sie nicht, markieren Sie die Frage als beantwortet. min-width ist das Fenster, Breite, min-device-width ist die Auflösung. Auf mobilen Geräten ist es das gleiche, da kann man nicht die Größe der Fenster (außer änderung der Orientierung), so gilt Sie nur für veränderbare Browser.
    • ok, interessant sein zu sehen, wie sich mein stylesheet für kleinere Bildschirme funktioniert jetzt! Nochmals vielen Dank

    InformationsquelleAutor Skwal
Schreibe einen Kommentar