Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)

Dieser Artikel stellt die von Webdesign-Meistern häufig verwendeten responsiven Frameworks vor und teilt sie mit Ihnen (Zusammenfassung). Die Einzelheiten sind wie folgt:

Mit der zunehmenden Popularität von HTML5 und CSS3 erfreuen sich responsive Design-Frameworks immer größerer Beliebtheit und erfreuen sich bei Webmastern und Designern immer größerer Beliebtheit. Allerdings gibt es in der Öffentlichkeit unterschiedliche Ansichten und Meinungen zu Responsive Frameworks. Manche Leute denken, dass ein professioneller Designer, der HTML5 und CSS3 versteht, sein eigenes Framework schreiben sollte, damit er eine einzigartige Website erstellen kann; andere denken, dass Responsive Design Frameworks Designern helfen können, schnell und effektiv eine praktische und schöne Website zu erstellen, was unverzichtbar ist, um Zeit und Energie zu sparen. In dieser Debatte tendiert Xiaofei dazu, den letztgenannten Standpunkt zu unterstützen. Xiaofei ist der Ansicht, dass selbst die erfahrensten Web-Frontend-Entwickler das Responsive Framework sorgfältig studieren sollten, da es uns einige Referenzen und Annehmlichkeiten bieten kann. In der heutigen schnelllebigen Zeit ist es für Designer zu zeitaufwändig, Frameworks zum Erstellen von Websites zu schreiben (Raster, Layouts und Medienabfragen sinnvoll anzuordnen). Darüber hinaus können Designer bei der Verwendung eines responsiven Frameworks ihrer Kreativität freien Lauf lassen, einige Funktionen anpassen und innovative Websites erstellen. Heute stellt Xiaofei einige responsive Frameworks vor, die derzeit häufig von Designern verwendet werden. Sie können sie entsprechend Ihren tatsächlichen Anforderungen verwenden.

Bootstrap

Bootstrap ist ein von Twitter eingeführtes Open-Source-Toolkit für die Frontend-Entwicklung. Es ist derzeit das beliebteste HTML5-Framework mit der größten Benutzerbasis und der größten Popularität in China. Der Slogan von Bootstrap lautet „Einfach, intuitiv, leistungsstark – macht die Webentwicklung schneller und einfacher“ und tatsächlich wird hart daran gearbeitet, dieses Ziel zu erreichen: Es deckt grundsätzlich alle Komponenten zum Erstellen reaktionsfähiger Websites ab, wie etwa den Bootstrap-Editor, angepasste jQuery-Plugins, die benutzerdefinierte Formularelemente, Javascript-Interaktivität, Cross-Browser-Kompatibilität und andere Funktionen realisieren können. Für die meisten Webmaster ist Bootstrap praktisch und einfach und ermöglicht zudem eine sehr schnelle Erstellung einer schöneren responsiven Website. Es ist ihre erste Wahl. Auch Xiaofei ist ein Fan davon. Viele exquisite Vorlagen der Self-Service-Website-Erstellungsplattform Qifeipage werden ebenfalls auf Basis des Bootstrap-Frameworks erstellt.

Bootstrap ist jedoch nicht perfekt. Obwohl Bootstrap mit mehreren Browsern wie Chrome, Firefox, Safari, Opera, 360 und Sogou kompatibel ist, basiert es auf HTML5 und CSS3. Einige Funktionen sind für IE-Browser nicht so benutzerfreundlich und werden in IE-Browsern möglicherweise nicht angezeigt. Wenn Ihre Website außerdem zu viele benutzerdefinierte Designinhalte enthält, führt die Verwendung von Bootstrap als zugrunde liegendes Framework für Änderungen im Allgemeinen dazu, dass eine große Anzahl von Stilen dupliziert wird, was zu Verwirrung in der CSS-Hierarchie führen kann und der späteren Wartung der Website nicht förderlich ist.

Stiftung

Foundation basiert auf einem flexiblen Grid und nutzt die neueste Technologie, was es zu einem Vertreter fortschrittlicher responsiver Front-End-Frameworks macht. Das Gesamtkonzept des Frameworks ist auf Mobilgeräte ausgerichtet, daher besteht eines seiner hervorstechendsten Merkmale darin, dass es auf Mobilgeräten wie Mobiltelefonen eine bessere Leistung bietet. Gleichzeitig unterstützt Foundation Benutzer bei der Verwendung benutzerdefinierter Dienste (Definieren von Rastern, Farben, Schriftgrößen usw.) und bietet eine Vielzahl von Web-UI-Komponenten wie Formulare, Schaltflächen usw., die ebenfalls flexibel zu bedienen sind. Im Vergleich zum weit verbreiteten Bootstrap ist Foundation in China relativ unauffällig, da es keine chinesischen Dokumente und Tutorials gibt. Viele Webmaster glauben jedoch, dass zu viele Leute das Bootstrap-Framework zum Erstellen von Websites verwenden und dass die von ihnen erstellten Websites wie aus einem Guss sind, sodass sich ihre Websites nicht von denen der Konkurrenz abheben können. Derzeit neigen sie eher dazu, Foundation zum Erstellen hochwertiger und einzigartiger Websites zu verwenden. Dieses Framework hat jedoch auch seine eigenen Mängel, nämlich das Kompatibilitätsproblem. Foundation 4 hat die Kompatibilität mit IE8 aufgegeben. Xiao Fei ist sich nicht sicher, ob das Verhalten von Foundation in der heimischen Browserumgebung vorteilhaft oder schädlich ist.

Skeleton

Im Vergleich zu den ersten beiden genießt Skeleton bei den Privatanwendern keinen so hohen Stellenwert. Es verwendet ein einfaches Rastersystem und verfügt über eine Sammlung von CSS- und JS-Dateien, wodurch Skeleton-basierte Websites schnell an Geräte mit unterschiedlichen Auflösungen (Computer, Tablets, Mobiltelefone usw.) angepasst werden können, wodurch die Benutzeroberfläche benutzerfreundlicher wird und das Benutzererlebnis optimiert wird. Obwohl Skeleton nur einige Standard-HTML-Elemente und eine 960-Pixel-Standardvorlage definiert, hat es keinen Einfluss auf die allgemeinen Anforderungen zum Erstellen von Websites. Aus diesem Grund ist es einfacher zu verwenden und eignet sich besonders für die Erstellung kleinerer Projekte.

Goldenes Gittersystem

Wenn Sie sich für das Rastersystem interessieren, ist das Golden Grid System sicherlich Ihre beste Wahl. Es beginnt als 16-Spalten-Raster, Sie können es jedoch reduzieren, um den Ansichtsbereich für die Anzeige auf Tablets und Telefonen auf ein 8- oder 4-Spalten-Layout zu verkleinern. Zusammengefasst handelt es sich um ein faltbares Raster, das die Kompatibilität des Webdesigns verbessern soll und über vier offensichtliche Funktionen verfügt: Spalten, seitenübergreifend, unterste Zeile und Skript. Die Verwendung des Golden Grid-System-Frameworks zum Erstellen einer Website bietet viele Vorteile. Beispielsweise kann es dabei helfen, klare und regelmäßige Layouts zu erstellen, um die Lesbarkeit von Webseiten zu verbessern. Es kann als Brücke zwischen Webdesignern und Frontend-Entwicklern dienen, um deren Kommunikation zu erleichtern. Außerdem kann es Reaktionsfähigkeit erreichen und das Layout ändern, um es an Bildschirme unterschiedlicher Größe anzupassen. Sind Sie bei all den Vorteilen immer noch nicht in Versuchung geraten?

Weniger Rahmen

Less Framework ist eines der klassischen responsiven Frameworks. Es ist ein adaptives CSS-Rastersystem, das 4 Layouts und 3 Schriftartvorgaben umfasst, um den Anforderungen verschiedener Fenster wie Computern, Tablets und Mobiltelefonen gerecht zu werden. Less Framework arbeitet mit einem einzelnen Raster und ändert die Anzahl der Layoutspalten und die Breite der äußeren Ränder, um unterschiedliche Layouts zu erstellen. Da CSS keine Programmiersprache ist, ist es für viele Designer relativ schwierig. Das Aufkommen von Less löst genau dieses Problem. Es vereinfacht das Schreiben von CSS-Codes erheblich, reduziert die Wartungskosten von Webseiten und ermöglicht es Designern, mit weniger Code bessere Websites zu erstellen. Der Name spiegelt sich hier weniger wider; kein Wunder, dass sich so viele Designer in dieses Framework verlieben.

Gumby

Wenn Sie neu im Bereich responsives Website-Design sind, ist das Gumby-Framework definitiv ein guter Ausgangspunkt für Sie. Gumby ist ein responsives CSS-Framework, das auf SASS (einem CSS-Erweiterungssprachenparser) basiert. Es wird mit Vorlagen und Web-UI-Toolkits geliefert, mit verschiedenen gut aussehenden Schaltflächen, Tabellen, Navigationen, Beschriftungen, JS-Dateien und schneller Reaktionsgeschwindigkeit. Es unterstützt auch No-Coding-Design, sodass es einfach zu bedienen ist, auch wenn Sie sich mit der Technologie nicht auskennen. Der Einstieg ist einfach und es gibt keine Hindernisse bei der späteren Wartung.

320 und höher

Dieses Framework ist zunächst auf kleine Bildschirme ausgerichtet und verwendet ein Stylesheet für kleine Bildschirme, das einige Einstellungseigenschaften wie Farbe, Typografie-Layout usw. enthält, um sicherzustellen, dass dem Inhalt der Website Priorität eingeräumt wird. Es passt sich gut an kleine Bildschirme an und auf großen Bildschirmen gibt es keine Probleme.

1140px CSS-Rastersystem

Eine responsive Website muss nicht nur auf die Bedürfnisse von Geräten mit kleiner Auflösung zugeschnitten sein, sondern auch ein Layout haben, das auf durchschnittlichen Computerbildschirmen gut aussieht und sich gleichzeitig an größere Auflösungen anpasst. Der 1140-Rasterrahmen tut genau das und passt perfekt auf einen Monitor mit einer Auflösung von 1280. Auf kleineren Displays kann es fließend werden und sich der Browserbreite anpassen.

Das Obige ist eine Einführung in das Responsive Framework. Verschiedene responsive Frameworks haben ihre eigenen Vor- und Nachteile, und kein responsives Framework ist perfekt. Denken Sie auch daran, dass die Verwendung eines Frameworks zum Erstellen einer Website nicht bedeutet, dass wir uns aus der Verantwortung lösen können. Wir müssen unsere Anforderungen immer noch vernünftig bewerten, einige Inhalte entsprechend anpassen und das Framework mit unseren eigenen Ideen kombinieren. Nur so können wir die positive Rolle des responsiven Frameworks beim Erstellen von Websites voll ausschöpfen und eine schöne und praktische responsive Website erstellen und dabei Zeit sparen. Wenn Sie keine Grundlagenkenntnisse im Framework haben und Ihnen die heute vorgestellten Informationen unklar sind, ist das kein Problem. Sie können auf der Self-Service-Website-Erstellungsplattform von Qifeipage einen Blick darauf werfen. Die Self-Service-Website-Erstellungsplattform von Qiqiye bietet zahlreiche responsive Vorlagen. Sie können schnell eine H5-responsive Website erstellen, die sich an alle Geräte anpasst, ohne dass Sie programmieren oder professionelle Kenntnisse haben müssen. Kommen Sie zur Self-Service-Website-Erstellungsplattform von Qiqiye, um eine Website zu erstellen!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.