Machen wir das Web mit nur einer Installationszeile responsive? Ich suche Mitwirkende!-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-11-06 09:04:02

Original

429 Leute haben es durchsucht

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()
   ],
};

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!