HTMl mit JS laden?
Ich habe mehrere HTML und eine CSS Dateien für jeweils verschiedene Bildschirmgrößen erstellt, da ich verschiedende Aufbauten einer Seite je nach Größe anzeigen möchte. Gibt es eine Möglichkeit um die verschiedenen Seiten mit JS zu laden/anzuzeigen ?
3 Antworten
Generell ist das kein guter Weg und ich würde dir raten, dich mit Media Queries in CSS auseinanderzusetzen. Das in Zusammenhang mit CSS Grid erlaubt dir so ziemlich jedes Layout direkt mit CSS für alle Bildschirmgrößen zu gestalten.
https://www.mediaevent.de/css/media-queries.html
Wenn du es trotzdem mit Javascript machen willst, kannst du matchMedia nutzen, was das Pendant zu Media Queries in Javascript ist:
https://www.mediaevent.de/javascript/window-matchMedia.html
In den Beispiele siehst du, wie du es verwenden musst und auch bei Änderungen der Bildschirmgröße darauf reagieren kannst. Du musst dann in dem Fall halt eine Weiterleitung auf die passenden Seiten einbauen.
Das ist aber echt umständlich und ich verweise auf meinen ersten Absatz.
Du denkst man prüft in der index.html die Bildschirmauflösung und leitet mit javascript
window.location = "deineseite.de/mobile.html"
auf eine mobile.html oder eine desktop.html weiter das ist aber nicht so.
Das sollte man nicht machen, auch bei Darkmode und sonstigen braucht man das überhaupt nicht.
Man benutzt CSS Media Queries um Elemente in verschiedenen Bildschirmgrößen anders darzustellen oder auszublenden.
Das ist sehr praktisch und sehr einfach zu lernen.
Schaue dir am besten Videos zu Responsive Webdesign an, da lernst du auch deine Website so zu strukturieren das es auch später mit wenig aufwand möglich ist oder welche Größeneinheiten man verwenden sollte.
Pixel, EM/REM, Prozent usw.
Ein einfaches Bild mit 90% Width sieht auf dem Pc riesig aus und das würde niemand machen, ein Bild mit 90% Width am iPhone sieht im vergleich normalgroß aus wenn nicht sogar zu viel Abstand zu den Seiten.
Als Alternative gibt es bei bspw Tailwind und Bootstrap… eigene Media Querie Klassen wie
sm: md: lg: usw dann kannst du sie so direkt verwenden
md:bg-red-500
Ja, einfacher und besser wäre es aber mit Prozentzahlen in CSS sofort in einem Dokument. Also statt width:200px -> width:20%; min-width:200px; max-width: 600px. bzw. mit JavaScript da html bearbeiten wenn es nicht zu viel ist. Als Beispiel.
Eine „Weiterleitung“ von einer Main Website auf die Unterseiten wäre mit JavaScript und dem Befehl „window.location = „http://wasauchimmer.de“
Ich hoffe das hilft, ansonsten kannst du mir auch privat schreiben.
VG