Wie man schnell und einfach jede Website Responsive Stellen
die Probe
Google Chrome
Keine Respektlosigkeit zu den anderen Browsern gibt - vor allem von Mozilla Firefox - aber Google Chrome ist genial, wenn Sie ein Web-Entwickler sind, vor allem, weil es eine eingebaute in Mobile Emulator Sportarten, die ich als wesentlich betrachten. Für diese Übung werde ich Chrome ausschließlich für die Entwicklung Seite der Dinge werden. Sie können aber auch eine beliebigen Browser verwenden, die guten Entwickler-Tools hat, und dann testen Sie Ihre bevorzugte mobile Emulationsumgebung.
Ein Texteditor
Wir werden einige Änderungen an HTML und CSS-Dateien machen, so dass Sie einen Text-Editor für diese benötigen, wird jemand tun.
Die Einführung Restive.JS
Also im Grunde, mit Restive.JS kann ich CSS wie folgt schreiben:
Im Gegensatz dazu:
Der Prozess
Ich habe einen neuen Ordner auf meinem Desktop, dann habe ich die komplette Web-Seite in diesem Ordner gespeichert. Ich habe dann eine Kopie der ursprünglichen Datei index.html, und nannte es index.orig.html; dies ist nur so dass wir Änderungen später vergleichen können, wenn wir brauchen.
Als nächstes habe ich drei neue Ordner ‚js',‚CSS', ‚img 'genannt; liebevoll bezeichnet mich als The Three Amigos durch. obwohl sie bei weitem nicht so unterhaltsam sind. Und ich denke, es ist ziemlich klar, was diese Ordner halten zu gehen, so werden wir auf das nächste, was zu bewegen.
Schritt 2: Installieren Restive.JS
Installieren Restive.JS ist ein Kinderspiel. Wir müssen herausfinden, ob die AirBnB Homepage jQuery verwendet; Ich vermute, es tut, aber nur für die Zwecke des Beweises mich doppelt sicher machen.
... das sieht aus wie es jQuery sein könnte. Nach dem Öffnen sehe ich, dass es ist, so können wir feststellen, dass der Schluss, dass jQuery auf dieser Seite tatsächlich aktiv ist.
Sie können Restive.JS über Github greifen. und speichern Sie sie einfach in das Verzeichnis ‚js'.
turbo_classes ist eine Besonderheit von Restive.js, die Klassen fügt [zusätzlich zu den in den Optionsklassen definiert], um unsere
Tag, wenn bestimmte vordefinierte Bedingungen erfüllt sind z.B. wenn das Gerät ein mobiles Gerät ist, wenn das Gerät eine Tablette ist, etc. Es gibt etwa 9 spezifische Bedingungen in allen. Im Moment verwenden wir 5, denn das ist alles, was wir brauchen. So zum Beispiel, is_landscape = Landschaft wird das Plugin sagen, die Klasse Landschaft des hinzufügen Tag, wenn sich das Gerät im Querformat und ist, dass Restive.js Stateful ist, wird diese Klasse auch, wenn das Gerät an das Hochformat wechselt entfernt werden.Schritt 3: Definieren Responsive Erweiterungen
Schritt 4: Implementieren Responsive Erweiterungen
Alle Responsive Erweiterungen werden wir für die Zukunft machen, wird über die Inline-CSS erfolgen. So schaffen wir eine Datei restive.css genannt; Diese Datei wird im ‚CSS' Verzeichnis abgelegt. Vorerst ist diese Datei leer, und wir werden, um es hinzuzufügen, wie wir gehen. Wir haben dann einen Link Verweis auf diese CSS-Datei auf der Seite index.html erstellen.
Hinweis. Es ist wichtig, dass unsere CSS-Datei lädt nach jeder anderen ähnlichen Datei, so dass wir auf sie verwiesen werden kurz vor dem Schließen
-Tag.Außerdem müssen wir den vorhandenen Darstellungs Meta-Tag aus ändern, was es zur Zeit jetzt ist [ ‚ ‚] Zu einem mobilen freundlichste. So ersetzen Sie den vorhandenen Ansichtsfenster-Meta-Tag zu dem, was Sie unten haben:
Die erste Aufgabe betrifft keine größeren feste Breite Elemente Zurücksetzen so dass nichts die Darstellungsbreite von einer mobilen Vorrichtung durchbricht. Zum Beispiel kann die
Die zweite Aufgabe beschäftigt sich mit Herstellung der Kopfzone für mobile Geräte festgelegt, so dass, ob wir nach oben oder unten, immer die Navigationsleiste an Ort und Stelle bleibt. Wir werden auch eine neue Mindesthöhe für diese Navigationsleiste.
Für diese Aufgabe werden wir einige ansprechende Verbesserungen für die ‚Helden‘ Zone zu ermöglichen. Doch für dieses Tutorial werden wir die „Sliding Hintergrundbild“ Funktion deaktivieren. Wir können dies als Reaktion machen, aber nur die Dinge vereinfachen wir überspringen werden, dass wir diese Übung so nicht mehr machen. Stattdessen werden wir eine der vorhandenen Bilder nehmen und beheben, dass auf das Layout. a.slideshow-scroll.slideshow-Scroll-zurück und a.slideshow-scroll.slideshow-Scroll-next Um dies zu tun wir ul # Diashow mit div # Diashow-neuen ersetzen und löschen. Wir werden auch einige vorläufige Layout Änderungen vornehmen div.search-Bereich.
Diese Aufgabe wird mit der Verantwortung aufgebürdet, die Haupt-Suchleiste zwicken. Wie ersichtlich ist, ist es ziemlich lange, und es wird im Ansichtsfenster eines Telefongerätes nicht passen, aber es wird wahrscheinlich, wenn wir seine Elemente anmutig kollabieren. Und damit dies geschieht, brauchen wir ein paar Updates zu einigen HTML-Komponenten der Form zu machen, die es uns ermöglichen, diese gezielt über CSS Ziel
Ich fand dies der komplizierteste aller reaktions Verbesserungen sein, weil nicht nur tun, müssen wir anmutig die Bildkacheln zusammenbrechen, sie müssen auch ansprechbar bleiben. Leider wird die Bilder in den Fliesen wurden aus einem Sprit [nicht einzelne Bilder über img tag], so dass die ol‘img Trick erstellt nicht zur Arbeit gehen. Aber ich habe es geschafft, auf machen Sprites Hintergrundbild anspricht sowie Ändern der Größe eines div einige Tipps zu finden, während Seitenverhältnisse aufrechtzuerhalten; Früher habe ich diese Logik, um das Ergebnis zu bekommen ich wollte.
Wir haben einige HTML zu dem hinzufügen
Diese Aufgabe beschäftigt sich mit dem Inhalt kurz vor der Fußzeile Zone das heißt, wo wir ‚Reisen‘, ‚Host‘ und ‚Vertrauen und Sicherheit‘ Überschriften haben. Dies ist ein ziemlich einfacher Zusammenbruch Betrieb, wo wir die Elemente ordnen sich in einer vertikalen Art und Weise machen sich horizontal gegenüber. Wir haben auch ID-Tags in die Zone
Dies ist die letzte Aufgabe - Puh! - und beschäftigt sich mit der Fußzeile ausschließlich. Wieder eine einfache Aufgabe, das Layout kollabiert. Und wir haben müssen hier keine HTML-Ergänzungen oder Aktualisierungen vornehmen.
Schritt 5: Hochladen und Ausführen
Also jetzt, dass wir fertig sind, können wir sie alle aus testen.
Die Ergebnisse
Abschließend aber Moving Forward
Sie können auch mögen.
Obinwanne Hill ist der Gründer und CEO von Restive. ein Software- und Service-Unternehmen coole Sachen baut das Web besser zu machen. Er ist zur Zeit auf einem edlen Streben jedes Web thingamajig Mobilfreundlich, schnell und intelligent zu machen. Verbinden Sie sich mit ihm über Twitter und LinkedIn.
PD: Ich spreche und schreibe Englisch, sooo schlecht.
Gleiches Problem. Didin't etwas mit Größe veränderte Browser-Fenster sehen. Andernfalls, wenn dies noch funktioniert, bitte aktualisieren Sie die Post. )
Nun wird ein jeder Tag wollen Zeit sparen und schnell wird zur Folge haben. Wie Sie vorschlagen, uns restive.js Tools sind wirklich nett und hilfsbereit zu allen Designern. Dank solch nützliches Werkzeug zu teilen. Ich werde dieses nützliche Werkzeug folgen neue Höhe in meiner Karriere Gestaltung zu geben.
PD: Ich spreche und schreibe Englisch, sooo schlecht
Es ist ein interessantes Tutorial, aber anders als ein bisschen Browser Unterstützung für die älteren Browsern anzubieten, die mediaqueries nicht unterstützen (und es ist unwahrscheinlich auf mobilen Geräten zu finden ist), kann ich nicht zu arbeiten scheinen, was der Nutzen von JS mit über mediaqueries ist. Es stützt sich auch auf den Benutzer mit JS eingeschaltet, die, obwohl sie eine abnehmende Zahl ist immer noch ein wichtiger Gesichtspunkt.
Hallo Akash. Danke fürs Lesen. Ja, das ist der ganze Sinn ... eine bessere Erfahrung für den Benutzer, unabhängig von Gerät. Ich denke, es ist auch wichtig, Entwicklern die Möglichkeit zu geben, schnell Responsive Funktionen CSS inline hinzufügen und in einem Schwung ... hilft den Entwicklungsprozess zu verkürzen.
Das sieht wirklich toll! Ich freue mich definitiv es auf die Überprüfung mehr in die Tiefe und es in einigen Projekten jetzt mit! Vielen Dank für auf dem Feedback hören und Änderungen vornehmen.
Das ist wirklich toll, als mit Medienanfragen zu kämpfen. aber das Problem, das ich habe, wenn bei der Prüfung. Früher habe ich einige Emulatoren, aber es funktioniert nicht zu sehr auf Emulatoren. Wir haben es von der rechten Gerät anzuzeigen, um sicherzustellen, wie ist der Prozess weitergeht. so dass ich denke, das ist eine Art von con. außer, dass ich empfehlen dies für alle.