html: Seitengröße an die Bildschirmauflösung des Betrachters anpassen

  • Hallo!

    OT: HTML ist keine Programmiersprache, aber blabla.

    Folgendes ist das Problem: Ich soll eine Seite machen, die sich der Auflösung des Endgerätes anpasst. Sprich: Kleiner Bildschirm - kleine Schrift; Großer Bildschirm - große Schrift.

    Ich denke da an einen manuellen Schalter, der eine Auswahl wie

    Zitat


    Schriftgröße auswählen: H H H

    (oder so ähnlich) zulässt.

    Dabei denke ich spontan an eine HTML - Datei, die ihren Style von je einer von drei CSS - Dateien bezieht.

    Was meint Ihr? Ist das sinnvoll? Würde eine CSS auch die quasi-automatische Vergrößerung und Verkleinerung von Grafiken erlauben? Sollte man das überhaupt manuell lösen, oder eine kleine Anfrage über die Bildschirmauflösung an den Browser senden (wenn keine Antwort zurück kommt, auf mittlere Standardgröße gehen)?

    Viele Grüße & vielen Dank an die erfahrenen Seitendesigner hier! :)
    SK1

  • Was du willst, nennt sich [responsive Webdesign]. Das kann man selber basteln, oder vorgefertigte responsive Stylesheets zu Hilfe nehmen, siehe [hier]. Du brauchst also keinen Schalter der aus drei CSS Files wählt, sondern ein CSS das deinen Content spezifisch anpasst.

    Da gibt's sicher noch bessere Stylesheets als W3.CSS, müßtest Mal suchen, hab selbst noch keine solche Seite gebaut bis jetzt, daher hab ich noch ned wirklich recherchiert.

    Und: Markupsprachen mögen vielleicht keine "Programmiersprachen" sein, aber das gehört schon trotzdem hier rein würde ich meinen wollen. :)

    1-6000-banner-88x31-jpg

    Stolzer Besitzer eines 3dfx Voodoo5 6000 AGP Prototypen:

    • 3dfx Voodoo5 6000 AGP HiNT Rev.A-3700

    [//wp.xin.at] - No RISC, no fun!

    QotY: Girls Love, BEST Love; 2018 - Lo and behold, for it is the third Coming; The third great Year of Yuri, citric as it may be! Edit: 2019 wasn't too bad either... Edit: 2020... holy crap, we're on a roll here~♡!

    Quote Bier.jpg@IRC 2020: "Je schlimmer der Fetisch, desto besser!"

  • Für responsive Webentwicklung gibts es massig Fronend Frameworks, das bekannteste und m. M. am beste dokumentierte ist http://getbootstrap.com/. Damit realisiere ich den Großteil meiner Webprojekte.

    Wenn das Einbinden eines solchen Frameworks nicht in Frage kommt, z.B. bei der Erstellung von Seiten für Intranets, usw kannst du im Stylesheet gezielt bestimmt Displaygrößen ansprechen:

    Code
    @media only screen and (max-device-width: 767px){ //mobile Geräte, auch mit Auflösungen größer als 767 weil mobile Geräte pixel ratios über 1 haben.
    	.className{
    		font-size: 12px;
    	}		
    }
    @media only screen and (min-device-width: 768px){ //Desktop, Tablets
    	.className{
    		font-size: 16px;
    	}		
    }

    Dieses Styling funktioniert natürlich auch weiterhin bei Einsatz eines Frameworks.