Wie ich Responsive mit ReactJS organisiere

Wenn wir mit der Arbeit an einem Projekt beginnen, müssen wir mit dem Prinzip „Mobile First“ arbeiten.

Die Bedeutung von Responsive Design

Heutzutage müssen wir eine große Anzahl von Bildschirmgrößen kontrollieren und pflegen, um eine Website oder eine Webanwendung zu erstellen. In häufigen Fällen ist der Designer dafür verantwortlich, schöne Designs in der Größe 1440px zu erstellen. Dort erstellen wir das Layout mit einer festen Größe. Jedoch entsteht dann das Problem, wenn wir diese Seite in verschiedenen Bildschirmgrößen betrachten. Responsive Design Planning (Planung vom Responsive Design)

Planen Sie von kleineren Bildschirmen aus und erweitern Sie diese. Was bedeutet das?

1.Da die Nutzung von Smartphones in den letzten Jahren stark zugenommen hat, sollte das Hauptaugenmerk auf der Optimierung für kleinere Bildschirmgrößen liegen. Ganz zu schweigen von den größeren Bildschirmen, da es immer noch viele Computerbenutzer gibt. Wenn wir mit der Arbeit an einem Projekt beginnen, müssen wir mit dem Prinzip „Mobile First“ arbeiten und uns die häufigsten Haltepunkte ansehen.

2.Verwenden Sie relative Werte, um den Vorgang zu erleichtern. Bei der Verwendung relativer Werte können wir unsere Arbeit deutlich vereinfachen und eine übermäßige Nutzung von Medienabfragen verhindern. Die Verwendung relativer Werte ermöglicht es dem Browser auch, Inhalte abhängig von der Zoomstufe des Benutzers anzuzeigen. 3. Ein weiterer sehr wichtiger Punkt ist die Anordnung von Fotos, um in verschiedenen Bildschirmgrößen reaktionsfähig zu sein. Hier treten die relative Werte ein, um das Wachstum von Fotos mehr als ihren Container zu verhindern. Wenn Sie verschiedene Fotos für Mobilgeräte und verschiedene Fotos für den Desktop verwenden müssen, können wir das Bildelement zusammen mit srcset verwenden.

Verschiedene Bibliotheken und Frameworks

Um die Arbeit mit Reaktionsfähigkeit zu vereinfachen, verwendet eine beträchtliche Anzahl von Entwicklern verschiedene Frameworks und Bibliotheken wie: • Bootstrap • Tailwind CSS • Bulma CSS • Pure CSS • Semantic UI • Ant Design Der Unterschied zwischen der Verwendung verschiedener Frameworks und Bibliotheken wird von Entwicklern eher bevorzugt, aber im Prinzip versuchen sie alle, unsere Arbeit ein wenig zu erleichtern. Wir bevorzugen das Ant Design für Projekte mit React.js, da es uns eine große Anzahl von Komponenten zur Verfügung stellt. volume_up content_copy Freigeben star_border

Ant Design

Ant Design ist eine React-Bibliothek mit vielen einfach zu bedienenden Komponenten, die für den Aufbau eleganter Schnittstellen nützlich sind. Es wurde vom Weltriesen Alibaba geschaffen und von mehreren großen Unternehmen wie Binance, Tencent usw. verwendet. Das responsive Ant Design verwendet das Raster von 24 Spalten und durch das spezielle col-Element können wir steuern, wie viele dieser Spalten dieses Element extrahieren.

Darüber hinaus kümmert sich Ant Design um col-Eigenschaften für verschiedene Bildschirme, indem ein Array mit speziellen Namen xs, sm, md, lg, xl oder xxl hinzugefügt wird, wobei diese Eigenschaften bildschirme mit Größen von <576px und bis zu> 1600px berücksichtigen. Wenn Sie mehr über E-Commerce-Entwicklungsplattformen oder Apps erfahren möchten, lesen Sie unsere Lexika für Shopify und Shopware. Unser engagiertes Outsourcing-Team kann Ihr Partner im E-Commerce sein.