CSS für Computer und Mobilegerät

[Henry]

Hallo,
ich habe einmal gelesen das ich eine CSS Datei für den Computer machen muss und eine für Mobielgeräte.

Wie mache ich das das auf dem Computer die eine und auf Mobilengeräten die andere CSS Datei genommen wird?

 

[Gelöschtes Mitglied 36401]

Siehe z.B. hier https://wiki.selfhtml.org/wiki/CSS/Media_Queries oder hier https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Deine Trennung Computer/Mobilgerät ist falsch, auf einem Computer kann man den Browser verkleinern, so dass man nicht mehr Fläche wie auf einem Mobilgerät zur Verfügung hat.

 

[MrMurphy]

ich habe einmal gelesen das ich eine CSS Datei für den Computer machen muss und eine für Mobielgeräte.

Die Aussage ist sachlich schlicht falsch. So ein Vorgehen ist weder sinnvoll noch üblich.

Als die ersten sogenannten Mobilgeräte am Markt auftauchten wurde nach Möglichkeiten gesucht, wie Webseiten auf denen dargestellt werden konnten. Eine von vielen Ideen war, für unterschiedliche Endgeräte jeweils passende CSS-Dateien anzulegen. Das hat sich schnell als unsinnig erwiesen, zumal die Bildschirmgrößen immer vielfältiger wurde.

Deshalb hat sich das sogenannte responsive Layout durchgesetzt und seit über 10 Jahren in der Praxis bewährt. Das kann zwar auch aus mehreren CSS-Dateien bestehen, die aber nichts mit der Bildschirmgröße zu tun haben.

Das responsive Design wird auch durch neue CSS-Möglichkeiten wie Flexbox (display: flex), CSS-Grid (display: grid) und und und unterstützt.

 

[Henry]

Aber wie kann ich dass machen weil meine Seiet

Die Aussage ist sachlich schlicht falsch. So ein Vorgehen ist weder sinnvoll noch üblich.

Als die ersten sogenannten Mobilgeräte am Markt auftauchten wurde nach Möglichkeiten gesucht, wie Webseiten auf denen dargestellt werden konnten. Eine von vielen Ideen war, für unterschiedliche Endgeräte jeweils passende CSS-Dateien anzulegen. Das hat sich schnell als unsinnig erwiesen, zumal die Bildschirmgrößen immer vielfältiger wurde.

Deshalb hat sich das sogenannte responsive Layout durchgesetzt und seit über 10 Jahren in der Praxis bewährt. Das kann zwar auch aus mehreren CSS-Dateien bestehen, die aber nichts mit der Bildschirmgröße zu tun haben.

Das responsive Design wird auch durch neue CSS-Möglichkeiten wie Flexbox (display: flex), CSS-Grid (display: grid) und und und unterstützt.

Aber wie kann ich das machen, meine selbst programmierte Seite sieht auf Handys Doof aus

 

[AndreasB]

Hast du dir die Links aus #2 genau angeschaut?
Dort findest du alles was du benötigst.

Mit Mediaqueries kannst du die Seite völlig unterschiedlich aussehen lassen. Zum Beispiel bei einer bestimmten Browsergröße.

 

[MrMurphy]

Aber wie kann ich das machen, meine selbst programmierte Seite sieht auf Handys Doof aus

Die Grundlagen wirst du schon lernen müssen. Konkrete Infos können wir dir ohne Kenntnis deiner Seite nicht geben. Die muss eventuell mit aktuellen HTML und darauf aufbauend CSS neu erstellt werden.

Das ist häufig aber nicht so dramatisch wie es sich liest.

 

[Henry]

Die Grundlagen wirst du schon lernen müssen. Konkrete Infos können wir dir ohne Kenntnis deiner Seite nicht geben. Die muss eventuell mit aktuellen HTML und darauf aufbauend CSS neu erstellt werden.

Das ist häufig aber nicht so dramatisch wie es sich liest.

HTML lernen

Meine Seite

 

[Henry]

Noch eine Frage

Wie kann man klein so ein Logo einfügen was das klein abgebildet ist?
Man sieht doch oben immer bei den geöffneten Tabs so ein logo zur Seite.

 

[MrMurphy]

Dabei handelt es sich um ein Favicon.

Infos findest du zum Beispiel unter https://de.wikipedia.org/wiki/Favicon

Die Favicons müssen also in vorgegebenen Größen vorliegen. Am problemlosesten in allen Browsers funktionieren Icons im ico-Format. Wenn du selbst ein Favicon erstellen willst benötigt du ein Grafikprogramm, dass die erstellte Grafik entsprechend abspeichern kann. Oder eine vorhandene Grafik in das ico-Format umwandeln kann.