Heim >Web-Frontend >CSS-Tutorial >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:02508Durchsuche
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:
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!