Grüße, Gelegenheitsbesucher und regelmäßige Leser der Blogseite!

Vor einiger Zeit habe ich meinen Blog aktualisiert, indem ich ein völlig neues WordPress-Theme erstellt habe. Wie das passiert ist, habe ich im Artikel „“ geschrieben. Eine der Hauptaufgaben beim Erstellen einer neuen Vorlage ist das adaptive Layout der Site für alle Bildschirmauflösungen.

Kurzer Abriss des Artikels:

In einem früheren Artikel habe ich bereits darüber geschrieben, warum und warum es notwendig ist. Doch wie erreicht man genau diese Anpassungsfähigkeit?

Dafür gibt es verschiedene Wege. Einige verwenden Javascript, andere etwas anderes. Aber ich glaube, dass das einfachste und der richtige Weg ist eine adaptive mit CSS.

So erstellen Sie ein responsives Website-Layout

Erstens, wenn Sie ein responsives Website-Design erstellen möchten, zwischen den Tags Fügen Sie den folgenden Code ein:

Was für ein Idiot war ich, dass ich das nicht sofort getan habe, als ich versuchte, ein adaptives Website-Layout zu erstellen!!!
Problem mobile Browser in ihrer Skalierung des Seitenlayouts sogar adaptiv.

Stellen Sie sich vor, ich zeichne einen Entwurf, schreibe dann alle notwendigen Stile und Abfragen auf und überprüfe die Anpassungsfähigkeit der Website bei verschiedenen Auflösungen. Alles scheint in Ordnung zu sein! Aber wenn ich meinen Blog auf meinem Smartphone öffne, sehe ich, dass die Seite einfach geschrumpft ist. Es wurde nicht an das Mobilgerät angepasst, sondern lediglich die Größe der Schriftart, Bilder usw. reduziert.

Wie so? Ich fing an, alle Stile noch einmal zu überprüfen, um zu sehen, ob ich die Klassen richtig geschrieben hatte, und kam schließlich an den Punkt, an dem ich die Breite des Browserfensters in px mithilfe von Javascript überprüfte. Ich war schockiert. Bei der Überprüfung auf einem Laptop erhielt ich ein Ergebnis von 1024 Pixel, und beim Öffnen der Website auf einem Smartphone erhielt ich ungefähr das gleiche Ergebnis!

Aber das kann nicht sein!

Es stellt sich heraus, Wenn Sie den oben angegebenen Code nicht schreiben, erkennt der mobile Browser nicht, dass die Website reagiert und versucht einfach, die Website-Seite zu verkleinern, damit sie auf einen kleinen Handy-Bildschirm passt.

Durch meine Dummheit und Inkompetenz habe ich viel Zeit verloren. Aber jetzt erinnere ich mich für immer daran))).

Adaptive Layout-CSS-Medienabfragen

Um es mithilfe von CSS reaktionsfähig zu machen, müssen Sie Medienabfragen verwenden.

Wie ist das? Ja, ganz einfach. In die CSS-Datei müssen Sie Abfragen schreiben wie:

@media screen und (min-width: 1440px) und (max-width: 1599px)( )

Dieser Code bedeutet, dass zwischen „( )“ eingeschlossene Stile für Bildschirme mit einer Mindestbreite von 1440 Pixel und einer Höchstbreite von 1599 Pixel funktionieren.

Das heißt, diejenigen Stile von Site-Elementen, die je nach Bildschirmauflösung angepasst werden müssen, müssen für jede mögliche Bildschirmbreite separat geschrieben werden.

Die wichtigsten Bildschirmauflösungen für adaptives Layout

• 320px- Mobilgeräte (Hochformat);
• 480px- Mobile Geräte (Querformat);
• 600px- Kleine Tabletten;
• 768px- Tablets (Hochformat);
• 1024px- Tablets (Querformat)/Netbooks;
• 1280 Pixel oder mehr- PC.

Es sind diese Auflösungen, auf die Sie sich bei der Erstellung adaptiver Layouts konzentrieren und denen Sie besondere Aufmerksamkeit schenken müssen. Dies sind die gängigsten Arten von Bildschirmauflösungen.

Bootstrap-responsives Design

Es ist sehr praktisch, Bootstrap zum Erstellen eines adaptiven Layouts zu verwenden. Der Vorteil besteht darin, dass alle Stile zum Anpassen von Blöcken, Schaltflächen, Tabellen usw. sind bereits in Bootstpap registriert. Sie müssen nur herausfinden, welche Klasse welchem ​​Element zugewiesen werden soll.

Laden Sie zunächst die neueste Version von Bootstrap herunter und verbinden Sie sie mit Ihrer Website. Bitte beachten Sie, dass die Anbindung von Stilen und Skripten an WordPress ihre eigenen Besonderheiten hat.

Das Layout von Bootstrap unterscheidet sich dadurch, dass die Breite des Blocks oder Bildschirms in 12 gleiche Teile unterteilt ist. Und indem Sie einem Block eine bestimmte Klasse zuweisen, können Sie die Breite des Blocks auf die erforderliche Anzahl von Teilen einstellen.

Mit diesem Design können Sie beispielsweise einen breiten Block für Inhalte mit einer Breite von 8 Teilen und einen schmalen Block für eine Seitenleiste mit einer Breite von 4 Teilen zuweisen:

Die Breite der Blöcke wird automatisch abhängig von der Breite des Bildschirms berechnet. Und wenn man sie auf einem mobilen Gerät betrachtet, verschieben sich diese Blöcke untereinander.

Sie können auch den Abstand des Blocks vom Rand anpassen, wiederum an die erforderliche Teileanzahl. Zum Beispiel dieses Design:

Es wird ein 10 Teile breiter Block mit einem linken Einzug von 1 Teil des Bildschirms erstellt.

Wenn Sie es sich ansehen, geht die Arbeit mit Bootstrap sehr schnell. Darüber hinaus funktionieren diese Stile auf jeden Fall korrekt und es wird nichts Schiefes auf der Website geben.

In Zukunft habe ich vor, mehrere Lektionen zum Arbeiten mit Bootsrap zu veröffentlichen. Deshalb rate ich Ihnen, diesen Moment nicht zu verpassen.

Überprüfung der Anpassungsfähigkeit der Website

Es stellt sich jedoch die Frage: Wie kann die Anpassungsfähigkeit der Website überprüft werden? Jetzt haben Sie Medienabfragen in CSS geschrieben, Bootstrap angeschlossen und die erforderlichen Klassen verwendet. Wie können Sie überprüfen, ob sich die Website bei allen Bildschirmauflösungen korrekt anpasst?

Sehr genau und vor allem kostenloser Service, was Respekt und Dankbarkeit von Webmastern und Layout-Designern verdient, die sich damit befassen adaptives Layout Websites.

Na, wie gefällt Dir der Artikel? Ist alles klar? Wenn nicht, schreiben Sie in die Kommentare, wir finden es gemeinsam heraus.

Ja, um ein responsives Website-Design zu erstellen, müssen Sie hart arbeiten. Diese Bemühungen werden jedoch mit einer positiven Einstellung der Suchmaschinen und vor allem der Besucher Ihrer Website zu Ihrer Website belohnt.

Einer der Hauptparameter jedes Smartphones ist die Bildschirmauflösung. Lassen Sie uns herausfinden, was es ist und warum es so wichtig ist.

Was ist eine Bildschirmauflösung?

Die Bildschirmauflösung ist ein Wert, der sich auf die Anzahl der Pixel auf dem Bildschirm in Länge und Breite bezieht. Dieser Parameter ist wichtig, da er die Bildschärfe jedes Smartphones bestimmt.

Die Bildschirmauflösung beeinflusst die Bildqualität. Je größer es ist, desto besser und klarer wird das Bild. Wenn das Gerät große Abmessungen, aber eine niedrige Auflösung hat, sind Pixel im Bild sichtbar. Zahlen und Symbole wirken unzureichend klar und in seltenen Fällen ungeschickt, wie bei alten Tastentelefonen.

An im Moment 99 Prozent der Smartphones verfügen über drei Arten von Bildschirmen

• HD (1280x 720, 720p);
• Full HD (1920×1080, 1080p);
• Quad HD (2560×1440, 1440p).

Welche Bildschirmauflösung soll ich wählen?

Eine der beliebtesten Smartphone-Displayauflösungen ist 1280 x 720 Pixel – HD. Fast alle Gadgets im Budget-Preissegment sind mit genau diesem Indikator ausgestattet.

Leistungsstärkere Geräte sind mit Displays mit höherer Auflösung ausgestattet. Smartphones mit 1920 x 1080-Bildschirmen sind schon vor langer Zeit aufgetaucht und überraschen niemanden mehr. Wenn die Diagonale des Smartphones zwischen 4,5 und 5,5 Zoll liegt, ist ein Bildschirm mit 1920 x 1080 Pixeln (Full HD) am besten geeignet. Bei einer niedrigeren Auflösung sind Pixel auf dem Bild sichtbar und der Benutzer kann sich unwohl fühlen. Dies ist wahrscheinlich die goldene Mitte - Die Preise sind niedrig, das Bild ist klar und hell.

Ab einer Diagonale von 5,5 Zoll nutzen Flaggschiff-Geräte die Quad-HD-Auflösung (2650 x 1440). Die Bildqualität ist hier zwar hoch, das menschliche Auge kann jedoch praktisch keinen nennenswerten Unterschied wahrnehmen. Quad HD ist ein Feature der Zukunft, es ist notwendig für Augmented- und Virtual-Reality-Technologien.

Seit einigen Jahren schwärmen Fachjournalisten von der Post-PC-Ära; die Verkäufe von Computern traditioneller Formfaktoren sinken unaufhaltsam, ebenso wie die Aktien ihrer Hersteller. Aber die Menge mobile Geräte, Smartphones oder Tablets, wächst stetig.

Für den Designer bedeutet dies zunächst einmal, dass er unabhängig davon, ob die technische Spezifikation zumindest etwas über mobile Geräte enthält oder nicht, ein Layout entwerfen muss, damit die Website von einem Telefon (und noch mehr von einem Tablet) aus genutzt werden kann ). Und dazu gehört nicht nur, dass die Tasten mit dem Finger bedienbar sein sollten. Im Idealfall sollte die Site natürlich über eine separate verfügen mobile Version, aber wie unsere Erfahrung zeigt, möchten die meisten Kunden keine zusätzlichen Mittel dafür bereitstellen, sondern werden sich sicherlich beschweren, wenn bei ihnen von ihrem Lieblingsgerät von Apple aus etwas nicht funktioniert.

Wenn ich mich an die Fehler erinnere, die Designer, die ich kenne, gemacht haben, ist das erste, was Probleme mit den von ihnen gezeichneten Layouts verursacht, das Fehlen einer genauen Vorstellung davon, wie viele Pixel auf einen Bildschirm passen, dessen Nennauflösung höher ist als die eines 20-Zoll-Bildschirms. Desktop-Monitor. Nun ja, das ist in Ordnung, dafür wurde die Vermarktung großer Zahlen konzipiert. Dieser Artikel soll Ihnen helfen, die aktuelle Situation zu verstehen.

Wir sprechen über Geräte auf Android und iOS, WP ist noch exotisch und ohne persönliche Erfahrung werde ich keine Empfehlungen geben.

Wenn drin HTML-Dokument Es gibt keine Meta-Tags, die dem mobilen Browser etwas darüber sagen, in welcher Breite das Dokument angezeigt werden soll. Dann verhalten sich Browser so, als ob die Breite des Dokuments 980 Pixel beträgt. Dies gilt für Telefone mit einer Bildschirmbreite von 320 Pixeln sowie für 10-Zoll-Tablets mit Android und iOS und einem Webkit-Browser. Dieser Ansatz bedeutet, dass Websites mit einer Mindestbreite von 960 Pixeln kleine Ränder haben, um die Lesbarkeit der Inhalte zu erleichtern.

Wenn die minimale Dokumentbreite größer ist, beginnt sich das Verhalten der Browser zu unterscheiden. Safari auf dem iPhone/iPad komprimiert in den meisten Fällen einfach den Inhalt. In Android werden sich DIP-dichteunabhängige Pixel manifestieren, mehr dazu später. Wenn die Dokumentbreite größer als 980 und größer als die Gerätebreite in DIP ist, erscheint ein Bildlauf nach rechts. So wird eine Seite mit einer Inhaltsbreite von 1040 Pixeln ohne horizontales Scrollen auf dem iPhone und iPad (1024 Pixel) angezeigt, aber mit Scrollen auf Telefonen wie dem Galaxy S3 (physische Auflösung 1280 x 720) oder dem Nexus 7-Tablet (physische Auflösung 1280 x 800). ).

Welche Schlussfolgerungen sollten gezogen werden? Trotz der Fülle an Widescreen-Displays auf Desktops und Laptops hat das gute alte 960-Pixel-Raster nicht an Relevanz verloren. Mobile Browser haben auch die Möglichkeit, Textblöcke in ein Format zu bringen, das auf einem Gerät gut lesbar ist, indem sie beispielsweise Text auf einem Telefon in eine schmale Spalte komprimieren und die Schriftart vergrößern. Dies funktioniert nicht, wenn die Höhe des Textes, der den Block enthält, streng begrenzt ist. Tatsächlich sollten Sie niemals eine Website erstellen, bei der die Höhe begrenzt ist, insbesondere wenn Sie Besucher über mobile Geräte planen. Ein weiterer Feind mobiler Geräte, insbesondere Telefone, sind Elemente mit der Position „fixed“. Zum Beispiel der mittlerweile modische Zurück-Button, der dem Nutzer beharrlich auf der Seite folgt. Noch schlimmer sind große Matrizen, etwa eine feste Kappe. Solche Elemente nehmen nicht nur auf einem kleinen Bildschirm nützlichen Platz ein, sondern bleiben auch bei Vergrößerung an derselben Stelle. Das Problem ist auch typisch für modale Fenster. Wenn sie in der Mitte des Bildschirms angezeigt werden, erfordert das Vergrößern ihres Inhalts von einem Mobiltelefon aus einiges an Geschick. Verwenden Sie Popups wie „Bleiben Sie mit uns in Kontakt.“ soziale Netzwerke!“, stellt ein solches Verhalten im Allgemeinen eine große Respektlosigkeit gegenüber Nutzern mobiler Geräte dar, da es oft einfacher ist, die Website zu verlassen, als dieses Popup zu schließen.

Schauen wir uns als Beispiel einige Websites an.

Obwohl Lenta.ru über eine sehr gute mobile Version verfügt, gibt es keinen automatischen Übergang dorthin. Auf dem Desktop überlagert das feste Menü den Text mit automatischer Skalierung. Der Benutzer steht vor der Wahl, entweder von Hand zu skalieren oder nicht zu faul zu sein, m zu schreiben. in der URL.

RBC. Im Allgemeinen gibt es auch eine mobile Version, der Übergang dorthin erfolgt jedoch nur mit Homepage. Über einen direkten Link (insbesondere von Google News) können Sie diese unleserliche Leinwand sehen. Wird ein Besucher auf einer solchen Website bleiben? Kaum.

Super kanonisches Pop-up im RBC-Stil. Ein herausragendes Beispiel dafür, was man nicht tun sollte.

Intan, wer hat getippt, raten Sie mal, wer. Ich habe natürlich vollkommen verstanden, warum man das mit der Speisekarte nicht machen konnte, aber irgendwie war ich nicht in der Stimmung zu streiten. Eine Frage zu stellen ist völlig unangebracht.

Eine weitere Sache, die sich auf dem Desktop normalerweise nicht lohnt und auf Mobilgeräten Probleme verursacht, sind benutzerdefinierte Formularelemente. Die Tatsache, dass sie mit CSS fast nicht anpassbar sind, liegt nicht nur daran, dass das World Wide Web Consortium faul war.

Sie haben zum Beispiel eine schöne Dropdown-Liste gezeichnet. Nehmen wir an, dass es in einem Desktop-Browser wie alles andere aussieht, es per Mausklick geöffnet wird und mit dem Rad gescrollt wird. Aber auf Mobilgeräten wird die Arbeit mit solchen Elementen große Probleme bereiten. Wenn „select“ Standard wäre, würde dem Benutzer je nach Betriebssystem ein Systemfenster mit einer Drum-/Dropdown-Liste angezeigt.

In iOS gibt es keine Möglichkeit, eine Datei anzuhängen. Und wenn das Standard-Erscheinungsbild einer Schaltfläche den Benutzer darauf hinweist, dass sie deaktiviert ist, kann eine helle, schöne Schaltfläche den Eindruck erwecken, dass auf Ihrer Website etwas nicht funktioniert.

Natürlich sollte das mobile Gerät im Idealfall identifiziert werden und bei mobilen Geräten sollten keine Skripte ausgeführt werden, die auf eine Änderung der Standardschnittstelle abzielen.

Ein weiteres ärgerliches Merkmal mobiler Browser ist, dass sie Plug-in-Schriftarten derzeit nicht zwischenspeichern. Das Laden der gleichen PT Sans in allen Stilen, verbunden mit Google Web Fonts, dauert auffällig lange. Dabei steht es der verbauten Helvetica/Roboto kaum merklich nach. Überlegen Sie genau, ob sich die zusätzliche Ladezeit Ihrer benutzerdefinierten Schriftart lohnt.

Bildschirmgrößen und Auflösungen mobiler Geräte. Unterschied zwischen der physischen Bildschirmauflösung und der Auflösung des mobilen Browsers

Das iPhone und das iPad nutzen das Konzept der Apple Points. Die iPhone-Auflösung bis Modell 5 beträgt 320 x 480 Pixel. Was ist ein Retina-Display? Das Retina Display verwendet die doppelte Pixeldichte, was bedeutet, dass pro Pixel 4 physische Pixel vorhanden sind. Das iPhone 4 hat also bei einer physikalischen Bildschirmauflösung von 640 x 960 Pixel immer noch 320 x 480 Pixel. Gleichzeitig sind die Grafiken jedoch detaillierter, da in Anwendungen doppelt so große Bilder verwendet werden. Für das iPhone 5 stieg der Pixelwert von 480 auf 568. Für das iPad aller Versionen, einschließlich Mini, bleibt er unverändert – 1024 x 768.

Standardmäßig werden Standardgrafiken im Web (z. B. Hintergrundbilder) im Maßstab 1:1 so angezeigt, als ob ein Pixel um 4 Pixel des physischen Bildschirms gestreckt wäre Bitmap. So verwenden Sie Grafiken hohe Auflösung In einer solchen Situation werden wir uns im nächsten Abschnitt damit befassen. Das Wichtigste, was Sie bei Berechtigungen beachten sollten iOS-Geräte- Denken Sie nicht, dass Netzhaut- und Nicht-Netzhautseiten unterschiedliche Breiten haben. Nein, der einzige Unterschied besteht in der Pixeldichte, die Proportionen sind absolut gleich.

Bei Android ist die Situation viel komplizierter, präziser und vielfältiger. Android nutzt das Konzept unterschiedlicher Bildschirmdichten (DPI). Sein Wesen liegt darin, dass es anders ist physikalische Dimensionen Abhängig von der Darstellung und der Auflösung unterscheidet sich das Verhalten der Punkte je nach Verwendungszweck des Geräts. Das Analogon zu Punkten ist das oben erwähnte DIP.

Bildschirmdichte - 1. Diese Kategorie umfasst viele Geräte, z. B. Telefone mit 320 x 480 (HTC Hero, LG Optimus One), 7-Zoll-Tablets mit 1024 x 600 ( Samsung Galaxy Tab, Kindle Fire), 10-Zoll-Tablets (Asus Transformer, Acer A500, Galaxy Tab 10’1).

Die Bildschirmdichte 1,33 wird in 7-Zoll-Tablets wie dem Nexus 7 verwendet. Die physikalische Auflösung beträgt 1280 x 800, in DIP 960 x 600.

Rasterdichte 1,5 - Mobiltelefone hoch Preiskategorie 2011 und Durchschnitt 2012, 10 Zoll-Tabletten mit FullHD. Beispiel: Nexus One 480 x 800 Pixel, 360 x 533* DIP, HTC One S – 540 x 960 Pixel, 360 x 640 DIP und Asus Transformator-Pad Unendlich 1920 x 1200 Pixel, 1280 x 800 DIP.

*Bei Android-Entwicklern sind es 534, aber die Messung der Browserbreite über JS zeigt genau 533, entsprechend sollten Sie sich bei Medienabfragen auf diese Zahl konzentrieren.

Bildschirmdichte 2 - Telefone der hohen Preisklasse von 2012 und buchstäblich ein paar Tablets. Zum Beispiel HTC One X, Samsung Galaxy S3 – Bildschirmauflösung 1280 x 720, Abmessungen in DIP 360 x 640. Google Nexus 10-Tablet – Auflösung 2560 x 1600 Pixel, 1280 x 800 DIP.

Bildschirmdichte 3 – Flaggschiffe 2013 mit FullHD-Display. Mit einer Auflösung von 1920x1080 Pixeln haben sie immer noch das gleiche 360x640 DIP.

Zu all dem gibt es auch das berührungslose Google Nexus 4 mit einem Bildschirm von 1280 x 768 Pixeln und einer Dichte von 2 (384 x 640). Bei Modellen mit Bildschirmtasten belegt 42DIP das entsprechende Panel, also bei Modellen dieser Art (Galaxy Nexus, Nexus 4, Sony Xperia Z) in Porträtmodus Die Porträtauflösung wird etwas niedriger sein und 598 Pixel betragen.

So haben wir drei Auflösungen für Porträts – 320, 460 und die seltene 384 – und viereinhalb Landschaftsauflösungen – 480, 533, 568, 640 (598 mit Softkeys).

Bei Tablets sind dies Hochformat 600 und 800 sowie Querformat 960, 1024 und 1280.

In der folgenden Tabelle sind die gängigsten Auflösungen für beliebte Produkte aufgeführt:

Wie beginne ich mit der Arbeit an einem mobilen Anwendungslayout?

Lesen Sie zunächst die Richtlinien. Anwendungen für verschiedene Plattformen sollten unterschiedlich aussehen. Wenn Sie dem Link folgen, können Sie beispielsweise typische Elemente verschiedener Betriebssysteme vergleichen

Um an Ihrem iPhone-App-Layout zu arbeiten, erstellen Sie eine Leinwand im Format 640 x 1136 (960) und verwenden Sie Vielfache von zwei Dimensionen. Alle Grafiken und alle Schriftarten sollten so sein.

Ein bestimmter Teil des Bildschirms in Ihrer zukünftigen Anwendung wird möglicherweise von einer Statusleiste mit Signalanzeigen, Batterieanzeigen usw. eingenommen. Dies sind 20 Punkte bei iOS und 25 DIP bei Android. IN Android-Telefone Bei Softkeys und Tablets ist 48 DIP am unteren Bildschirmrand mit einem Platz dafür belegt (Navigationsleiste). Darüber hinaus in nicht-kanonischen Geräten wie Samsung-Tablets aufgrund der Verwendung der proprietären Navigationsleisten-Shell und Statusleiste kombiniert.

Für eine Anwendung für Android-Telefone ist es wichtig, eine Hostgröße von mindestens 720x1280 zu verwenden. Es ist besser, direkt auf 1080 x 1960 umzusteigen, basierend auf modernen Flaggschiffen.

Bei einer Leinwand im Format 720x1280 sollten die Abmessungen ebenfalls ein Vielfaches von zwei sein, bei 1080x1960 ein Vielfaches von drei. Die Verwendung von 480 x 800 oder 640 x 960 als Leinwand ist eine sehr schlechte Idee.

Während Sie am Layout arbeiten, müssen Sie die Fenstergröße regelmäßig reduzieren. Grafikeditor auf die ungefähre Größe eines echten Geräts zu bringen, sowie JPG zu speichern und auf einem echten Gerät anzuzeigen. Ist es möglich, den Knopf mit dem Finger zu drücken? Ist der Text zu klein?

Wenn Sie ein Layout mit ungeeigneten Größen verwenden, liegt die Schuld für das schiefe Erscheinungsbild der Anwendung oder die verschwommenen Grafiken allein bei Ihnen.

Achten Sie im Allgemeinen auf Details und denken Sie daran: Pixel und Punkte/Einbrüche sind nicht mehr dasselbe.

Optimierung von Webgrafiken für Bildschirme mit hoher Dichte

Wir haben also erfahren, dass es mehrere gibt mögliche Optionen Pixeldichte auf dem Display. Um den Effekt verschwommener Grafiken, auch bekannt als „Playstation-Effekt“, zu vermeiden, müssen wir daher entweder Rastergrafiken mit höherer Auflösung verwenden oder Vektorgrafiken, zum Beispiel SVG.

Allerdings ist die SVG-Unterstützung immer noch sehr begrenzt und für die Abwärtskompatibilität mit älteren Browsern müssen Sie weiterhin ein Raster verwenden. Ein weiteres Problem wäre die Verwendung von Sprites – Hintergrundpositionswerte müssten als Prozentsätze angegeben werden, was viel Mathematik erfordern würde. Der einfachste Weg besteht darin, mehrere Variationen derselben Bilder über eine Medienabfrage zu verwenden, zum Beispiel -webkit-min-device-pixel-ratio: 2.

Wie Sie sehen, ist die Technik selbst sehr einfach und erfordert lediglich das Vorhandensein mehrerer Versionen desselben Bildes, wenn es als Hintergrundbild verwendet wird. Gewöhnliche Bilder können bei Bedarf doppelt so groß hochgeladen werden, wie sie sein sollten, und die auf der Seite benötigte Größe kann über das Stilattribut angegeben werden.

Der Nachteil ist tatsächlich das höhere Gewicht hochauflösender Bilder. Hier müssen Sie entscheiden, was wichtiger ist – der Inhalt, den der Benutzer aufgrund des Gewichts der Seite nach längerer Zeit sieht, oder das Design.

Stimmen: 416 | Aufrufe: 4271