Artikeleinführung von Wulin.com (www.vevb.com): Responsive Webdesign.
Mit der Popularität von 3G nutzen immer mehr Menschen ihre Mobiltelefone, um im Internet zu surfen.
Mobile Geräte übertreffen Desktop -Geräte und werden zum häufigsten Terminal, um auf das Internet zuzugreifen. Webdesigner müssen sich also einem schwierigen Problem stellen: Wie können sie dieselbe Webseite auf Geräten unterschiedlicher Größen präsentieren?
Der Bildschirm eines Mobiltelefons ist relativ klein, normalerweise unter 600 Pixel. Die Bildschirmbreite eines PC liegt im Allgemeinen über 1.000 Pixel (derzeit beträgt die Mainstream -Breite 1.366 × 768) und einige erreichen sogar 2.000 Pixel. Es ist nicht einfach, zufriedenstellende Ergebnisse auf Bildschirmen unterschiedlicher Größen zu erzielen.
Die Lösung für viele Websites besteht darin, verschiedene Webseiten für verschiedene Geräte bereitzustellen, z. B. die Bereitstellung einer mobilen Version oder eine iPhone/iPad -Version. Dies gewährleistet den Effekt, ist aber ziemlich problematisch. Es erfordert die Aufrechterhaltung mehrerer Versionen. Wenn eine Website über mehrere Portale verfügt, erhöht sie außerdem die Komplexität des Architekturdesigns erheblich.
Einige Leute haben sich daher lange vorgestellt, ob es gleichzeitig gestaltet und allgemein für dieselbe Webseite anwendbar anpasst, die sich automatisch an Bildschirme verschiedener Größen anpasst und das Layout automatisch entsprechend der Bildschirmbreite anpasst?
1. Das Konzept des adaptiven Webdesigns
Im Jahr 2010 schlug Ethan Marcotte den Begriff Responsive Webdesign vor, der sich auf ein Webdesign bezieht, das die Bildschirmbreite automatisch erkennen und entsprechende Anpassungen vornehmen kann.
Er machte ein Beispiel für die Porträts der sechs Protagonisten der Abenteuer von Sherlock Holmes. Wenn die Bildschirmbreite größer als 1300 Pixel beträgt, befinden sich 6 Bilder nebeneinander.
Wenn die Bildschirmbreite zwischen 600 Pixel und 1300 Pixel liegt, sind die 6 Bilder in zwei Zeilen unterteilt.
Wenn die Bildschirmbreite zwischen 400 Pixel und 600 Pixel liegt, bewegt sich die Navigationsleiste zum Kopf der Seite.
Wenn die Bildschirmbreite unter 400 Pixel liegt, sind 6 Bilder in drei Zeilen unterteilt.
Mediaqueri.es haben oben weitere Beispiele wie diese.
Hier gibt es auch ein Test -Widget, mit dem die Testerffekte von Bildschirmen gleichzeitig auf einer Webseite mit unterschiedlichen Auflösungen angezeigt werden können. Ich empfehle es zu installieren.