Heim > Artikel > Web-Frontend > Machen wir das Web mit nur einer Installationszeile responsive? Ich suche Mitwirkende!

Machen wir das Web mit nur einer Installationszeile responsive? Ich suche Mitwirkende!

Barbara StreisandOriginal: 2024-11-06 09:04:02410Durchsuche

Kürzlich habe ich ein NPM-Paket mit der im Titel beschriebenen Mission veröffentlicht: Projekte mit nur einer Codezeile reaktionsfähig zu machen!

Ich teile mit Ihnen das Responsive-App-[Beta]-Paket

Ich habe ein paar Jahre damit verbracht, mit dieser Technik zu experimentieren und sie zu entwickeln, die derzeit aus Folgendem besteht:

Dynamisches Festlegen der HTML-Tag-Schriftgröße (über ein JS-Skript) unter Berücksichtigung von (1) der Bildschirmauflösung und (2) der Browser-Schriftgröße (für Webzugänglichkeit)
Pixeldefinitionen in rem vorverarbeiten
Elemente auf mobilen Bildschirmen zentralisieren (experimentelle Funktion)

Das Ergebnis sind alle Elementproportionen und relativen Größen, die über alle Bildschirmauflösungen hinweg gleich sind:

Let’s make the web responsive with just one installation line? I’m looking for contributors!

Mit nur einer Zeileninstallation, zum Beispiel per Rollup:

import responsive from 'rollup-plugin-responsive-app'

export default {
   …
   plugins: [
   …,
   // Last plugin on the list
   responsive()
   ],
};

Oder platzieren Sie die vom Browser gebündelte Version auf der Seite:

<head>
    <script src="https://cdn.jsdelivr.net/npm/responsive-app@1.0.7-beta.0/dist/browser-bundle.min.js"></script>
</head>

Das Hauptziel hier ist, beim Erstellen eines neuen Projekts Zeit zu sparen, indem man sich überhaupt nicht um die Reaktionsfähigkeit kümmern muss, sondern einfach darauf vertrauen kann, dass die Benutzeroberfläche auf allen Bildschirmauflösungen gut aussieht. Klingt großartig, oder?

Nach dem Start dieser Betaversion suche ich Unterstützung und Mitwirkende. Die Idee besteht zunächst darin, dieses Paket in verschiedenen Kontexten, Projekten und Frameworks (React, Angular, Vue…) zu testen, um den Prozess so umfassend wie möglich zu gestalten.

Wer ist für diese Herausforderung bereit? Testschritte sind:

Installieren oder fügen Sie das Skript-Tag in Ihre neue oder vorhandene App ein 1.1 Wenn Sie über bestehende Reaktionsregeln verfügen, umgehen Sie diese
Überprüfen Sie Ihre Schnittstelle über mehrere Auflösungen hinweg
Lassen Sie mich wissen, wie es bei Ihnen funktioniert hat :)

Das obige ist der detaillierte Inhalt vonMachen wir das Web mit nur einer Installationszeile responsive? Ich suche Mitwirkende!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html npm angular if for using Interface JS this idea

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So ändern Sie die Schaltflächenfarbe beim Hover: Was ist falsch und wie lässt sich das Problem beheben?Nächster Artikel：So ändern Sie die Schaltflächenfarbe beim Hover: Was ist falsch und wie lässt sich das Problem beheben?

In Verbindung stehende Artikel

Mehr sehen