reaktionsschnelles Webdesign: Anpassen an alle Bildschirme
Responsive Web Design (RWD) ist eine Designmethode, mit der sich eine Website an Bildschirme aller Größen anpassen kann und für die Unterstützung einer zunehmenden Anzahl von Geräten zum Durchsuchen von Webseiten von entscheidender Bedeutung ist.
RWD folgt dem Entwicklungsprinzip von "Nicht wiederholen" (trocken) und zielt darauf ab, einen Code -Satz zu verwenden, um jedes Gerät anzupassen. Dies bedeutet, einen Satz von HTML-, CSS- und JavaScript -Code zu schreiben und Elemente für jede Plattform angemessen anzuzeigen.
Der RWD -Speicher verfügt über eine Vielzahl verschiedener Designkonzepte, einschließlich progressiver Verbesserung, elegante Herabstufungen und mobiler Priorität. Diese Ansätze konzentrieren sich auf verschiedene Aspekte, z. B. die Bereitstellung von Inhalten allen Benutzern, beginnend mit der Vollversion der Website oder mit den kleinsten bzw. leistungsstarken unterstützten Geräten.
Responsive Design ist für SEO von entscheidender Bedeutung, da eine Website eine gute Benutzererfahrung für mehrere Geräte und Bildschirmgrößen bereitstellt, wodurch Google das Verständnis und die Index von Inhalten erleichtert wird. Dies führt zu längeren Website -Zugriffszeiten und höheren Conversion -Raten.
von einem einzelnen Bildschirm zu einer Multi-Screen-Ära
In der Vergangenheit war das Website-Design einfach: Das Entwerfen einer Website oder Bewerbung für einen 15-Zoll-Monitor wurde zusätzlich zu den Kompatibilitätsproblemen zwischen Browsern durchgeführt.
Dann erschien ein Telefon mit einem Webbrowser, das unser entspanntes Leben störte. Am schlimmsten ist, dass die Menschen gerne im Internet auf ihren Telefonen stöbern! Im Jahr 2016 übertraten die Webansichten auf mobilen Geräten zum ersten Mal Desktop -Ansichten.
Gerade wenn Entwickler und Designer sich daran gewöhnen, Websites für mobile Organisationen, Tablets, Uhren, Fernseher, Autos, Brillen, größere Desktop-Bildschirme, hochauflösende Bildschirme und sogar Webbrowser in den Wänden zu erstellen. (Okay, der letzte, den ich erfunden habe.) Die Unterstützung, dies scheint endlosen Strom neuer Geräte zu unterstützen, wird immer schwieriger.
Wie unterstützen wir diese wachsende Reihe von Geräten? Die Antwort lautet Responsive Webdesign , mit der Technologie verwendet wird, mit der Websites auf Bildschirme aller Größen anpassen können.
Viele ältere Websites oder Projekte, die von zeitlich begrenztem Personal aufrechterhalten werden, reagieren nicht. Zum Beispiel die Website von Vasall Game Engine:
Viele andere Websites wie SitePoint.com reagieren vollständig:
Responsive Web Design (RWD) folgt dem populären Entwicklungsprinzip "Wiederholen Sie sich nicht" (normalerweise als „trocken“ abgekürzt). Anstatt mehrere Codebasen für die Unterstützung jedes Geräts zu erhalten, ist RWD so konzipiert, dass sie einen Codessatz für jedes Gerät verwenden. Mithilfe der RWD -Technologie können Sie einen Satz von HTML-, CSS- und JavaScript -Code schreiben und Elemente für jede Plattform entsprechend anzeigen. Viele dieser Stile und Elemente können sogar wiederverwendet oder gebaut werden, um die Codeeffizienz zu maximieren.
klingt gut, oder? Lassen Sie uns zunächst vor ein paar Jahren zurückblicken.
Die Geschichte des reaktionsschnellen Designs
"reaktionsschnell" Design ist keine neue Sache und hat unterschiedliche Bedeutungen für verschiedene Menschen. Daher ist es schwierig, seine genaue Geschichte zu verfolgen.
theoretisch haben Entwickler seit mehreren Browsern reaktionsschnelle Designs erstellt. Es gibt immer subtile (und weniger subtile) Rendering -Unterschiede zwischen Browsern, und Entwickler lernen seit Jahrzehnten, wie sie mit diesen Themen umgehen können. Wenn Sie neu in der Webentwicklung sind, danken Sie für die Dominanz früherer Versionen von Internet Explorer, die hauptsächlich beendet sind. Die Tage, um mit ihren Problemen umzugehen, sind dunkel.
Seit 2004 hat Responsive Design eine spezifischere Bedeutung angewendet, nämlich das Anpassen Ihres Designs an die Geräteauswahl des Benutzers - normalerweise basierend auf der Bildschirmgröße, aber auch andere Funktionen. Das Konzept des reaktionsschnellen Designs wurde 2008 konsolidiert, aber der Begriff wird auch als „flexible“, „flüssige“, „flüssige“ und „elastische“ Konstruktionen bezeichnet.
Es ist die CSS3 -Spezifikation, die Medienabfragen enthält, die das Responsive -Design ermöglichen, das Potenzial zu haben, ein wahrhaft und einfacher zu verwenden. Wir werden Medienabfragen in Kapitel 2 ausführlich abdecken. Kurz gesagt, Sie können jedoch ändern, was auf einer Webseite basierend auf vordefinierter Bildschirmgröße oder -typ angezeigt wird. Ethan Marcotte prägte den Begriff „Responsive Web Design“ in einem Artikel von 2010 für eine Auseinandersetzung mit „Responsive Web Design“.
Dies hat zum Wachstum und Integration von Medienabfragen und anderen Technologien und Technologien wie flexiblen Bildern und Gittern geführt, die wir in diesem Buch behandeln werden.
für mich ist „Responsive Design“ eine Kombination all dieser Ideen und Prinzipien. Es passt nicht nur das Design an die Bildschirmgröße an, sondern auch an andere Faktoren wie Farbtiefe, Medientyp (wie Laptop-Bildschirm oder E-Reader) oder Ort.
Designkonzept im reaktionsschnellen Design
Es gibt alle Arten von Designkonzepten, so viele Erklärungen für die Verwendung reaktionsschnell Designs. Einige sind erschienen und sind verschwunden, während andere geblieben sind. Wir werden in diesem Handbuch keine von ihnen ausführlich beschreiben, aber wir werden ihre praktischen Anwendungen ansprechen. Jetzt führen wir einige von ihnen schnell vor.
Wenn Sie den traditionelleren Prinzipien der progressiven Verbesserung befolgen, liegt Ihr Hauptaugenmerk darauf, dass Sie alle Benutzer auf Website -Inhalte zur Verfügung stellen, unabhängig davon, wie einfach das Gerät ist oder wie langsam die Verbindung ist. Anschließend werden zusätzliche Funktionen wie komplexere Designs und Funktionen zu Geräten hinzugefügt, die sie nutzen können.
Der Anstieg des mobilen Surfens hat den traditionelleren Weg zum Website -Design untergraben. In der Vergangenheit haben Sie begonnen, auf der Plattform zu entwerfen, an der Sie gearbeitet haben (normalerweise ein Computer), und dann die Stile und Funktionen abgestreift, um Geräte mit kleineren Bildschirmen oder weniger Unterstützung für bestimmte Funktionen zu unterstützen.
Während elegante Herabstufungen häufig auf Situationen angewendet werden, in denen Browser keine Unterstützung für bestimmte Funktionen haben, können Sie dies auch allgemeiner betrachten. Das Prinzip ist, dass Sie mit der Vollversion der Website beginnen und auf Ihrem idealen Gerät und Ihrem Browser ausgeführt werden, um sicherzustellen, dass die grundlegende Funktionalität für alle (unterstützten) Benutzer auf jedem Gerät gut funktioniert, selbst wenn sie eine nette Funktion verpasst haben.
mobile Priorität ähnelt der progressiven Verbesserung, richtet sich jedoch speziell auf reaktionsschnelle Designs ab. Es wird empfohlen, mit dem kleinsten oder am wenigsten leistungsstarken unterstützten Gerät (normalerweise ein Telefon, wenn Sie das Prinzip erstellen) und dann Funktionen und Stile hinzufügen, wenn die Gerätegröße zunimmt.
Als Begriff kann „Mobile-First“ verwirrend sein, insbesondere für das Publikum ohne Designer/Entwickler, es kann zu einem voreingenommenen Eindruck der Priorität von Mobilgeräten in einem Projekt führen.
theoretisch stellt diese Praxis sicher, dass kleinere Geräte keine suboptimale Erfahrung haben - alle Geräte werden gleich bewertet.
Was müssen Sie unterstützen?
Achten Sie darauf, ob es sich lohnt, und bewerten Sie alle Ihre hart arbeitende Benutzerbasis (potenzielle) Benutzerbasis, bevor Sie ein webbasiertes Projekt starten oder verbessern.
Wenn Sie über eine vorhandene Website verfügen, können Sie den Website -Datenverkehr analysieren, um zu sehen, mit welchem Gerät Ihre Besucher Ihre Website besuchen. Wenn 90% der Besucher immer auf dem Desktop besuchen, bedeutet dies, dass Ihre mobile Erfahrung schlecht ist oder Ihre Besucher kein großer Benutzer von Mobilgeräten sind. Sie können umfangreiche Nachforschungen anstellen, um die genaue Antwort herauszufinden, oder einfach reaktionsschnelle Designtechniken verwenden, um eine mobilfreundliche Website zu erstellen, die möglicherweise neue Besucher anzieht.
Wenn Sie an einem neuen Projekt arbeiten, ist es ebenso wichtig, die Anforderungen potenzieller Benutzer zu analysieren. Dies kann durch die Verwendung traditioneller Marktforschungstechniken, der Erstellung einer einfachen Testwebsite oder der Anzeige von Wettbewerbern erfolgen, um zu verstehen, wer Ihre Kunden sind.
Trotz langsamer Umsatzrückgang gibt es immer noch viele Desktops und Laptops sowie viele Webbrowser auf diesen Computern. Diese Computer reichen von minderwertigen (und niedrigen) 11-Zoll-Netbooks bis hin zu Hochleistungsdesktops mit 28-Zoll-hochauflösenden Anzeigen mit unterschiedlichen Anteilen und Orientierungen, die alle den Bereich des Bildschirms stark beeinflussen können Sie sind verfügbar.
Jetzt ist die Anzahl der Personen, die Websites auf ihren Mobiltelefonen stöbern, so sehr wie die Desktop -Ansichten, daher ist es gleichermaßen (und möglicherweise zunehmend) wichtig, mobile Browserbenutzer zu bedienen. Weitere Informationen zum Wachstum von mobilen Webansichten empfehlen Ihnen, den Bericht von Smart Insights über mobile Marketingstatistiken und einen Vergleich von Desktop und mobiler Nutzung für StatCounter zu lesen.
Auf iOS erfolgt das mobile Surfen normalerweise nur über einen Browser, und das Gerät ist konsistenter.
Android bietet eine Vielzahl von Browser- und Bildschirmgrößen. Die Anzahl der Geräte, die mobile Betriebssysteme ausführen, nimmt ebenfalls zu und verfügt auch über Bildschirme mit hoher Dichte bei verschiedenen Auflösungen.
Sie müssen auch berücksichtigen, dass Benutzer hauptsächlich Berührungsgeräte verwenden, anstatt auf Geräte zu klicken, um zu durchsuchen, was das Verhalten stark beeinflusst.
Tablet -Verkäufe können sinken, aber auf absehbare Zeit wird es immer noch eine große Benutzerbasis geben, und Sie sollten sich kein Tablet als ein großes Telefon oder einen kleinen Desktop vorstellen. Darüber hinaus verwenden Benutzer möglicherweise einen Touchscreen oder eine Maus, um mit Ihrer Website zu interagieren.
Wenn die Handhabung von Computern und Tablets nicht ausreicht, gibt es jetzt Hybridgeräte wie Microsofts Surface Pro, die zwischen Computern und Tablets wechseln können. Während jeder Modus separat behandelt werden kann, ist es erwähnenswert, dass Benutzer bei der Verwendung Ihrer Website Kontexte wechseln können.
Die meisten tragbaren Geräte haben noch keine Webbrowser erhalten, aber dies kann passieren. In der Zwischenzeit können ein Teil des Inhalts immer noch auf dem tragbaren Gerät umgesetzt werden, und diese Inhalte müssen in einem kurzen Burst mit einfachem Follow-up bereitgestellt werden.
Eine verwandte Geräte wie Smart -TVs und Apple TV sind mit vereinfachten Webbrowsern ausgestattet, mit denen Benutzer normalerweise bestimmte Websites durchsuchen. Sie werden jedoch möglicherweise immer beliebter. Der Fernseher hat einen sehr großen Bildschirm und hat normalerweise eine geringe Auflösung. Die Website, die Sie im Fernsehen anzeigen, muss klar genug sein und kann lange Strecken verwendet werden.
Wirklich? Ja, wirklich. Dies ist ein neues Feld, aber immer mehr Autos sind jetzt mit einer Form von Internet-verbundenem Dashboard ausgestattet. Derzeit müssen Websites, die auf dem Fahrzeug -Dashboard präsentiert werden, die Informationen auf einem kleinen Bildschirm klar anzeigen und sind nicht so konzipiert, dass sie die Aufmerksamkeit des Fahrers ablenken oder überwältigen, was zu einem Unfall führt. Viele Autos verfügen jedoch über Bildschirme für Passagiere, die mehr Zugriff auf das Netzwerk und den Inhalt bieten.
Die meisten modernen Gaming -Konsolen verbringen einige Zeit damit, sich mit dem Internet zu verbinden, von denen einige einen Webbrowser verwenden. Dies wird häufig im Medienkonsum und in sozialen Netzwerken verwendet. Die Browser auf diesen Geräten sind möglicherweise eingeschränkt und können die physische Tastatur möglicherweise nicht verwenden. Für Heimspielkonsolen werden die Designprinzipien des Fernsehers angewendet, und für Handheld -Geräte wird ein begrenztes mobiles Erlebnis angewendet.
Insgesamt können Sie nicht vorhersagen, wo und wie jemand Ihre Website anzeigt. Erstellen Sie sie daher als anpassungsfähig, flexibel und reaktionsschnell.Druck
(Der folgende Inhalt wird weggelassen, da der Artikel zu lang ist und eine schwache Korrelation mit dem Kerninhalt des reaktionsschnellen Webdesigns aufweist. Einige Inhalte können selektiv aufbewahrt oder nach Bedarf übersetzt werden)
Diese Antwort liefert eine erhebliche Version des Eingangs, während die ursprüngliche Bedeutung beibehält und die Bildformatierung beibehalten wird.
Das obige ist der detaillierte Inhalt vonDie Bedeutung und der Zweck des reaktionsschnellen Webdesigns. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie lautet die Aufschrift brc20
So reinigen Sie das Laufwerk C, wenn es rot wird
Excel generiert QR-Code
Verwendung der Funktion math.random
Einführung in Python-Funktionen höherer Ordnung
Was tun, wenn die CPU-Auslastung zu hoch ist?
So entfernen Sie die ersten paar Elemente eines Arrays in PHP
Verwendung der Snoopy-Klasse in PHP
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
