• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schrift prozentual?

M

MrSchledi

Neues Mitglied
Hallo
ich bin relativ neu im Gebiet HTML und Co. Mir ist gleich zu Beginn aufgefallen, dass ich nicht die Schriftgröße in Prozent angeben kann. Ich arbeite an einem Full HD Monitor. Setze ich mich an meinen Laptop mit einer Auflösung von 1080x1024 oder so ähnlich ist die Schrift zu groß. Korrigiere ich da ist diese auf dem Full HD wieder zu klein. Nun meine Frage, wie kann ich die Schriftgröße so einstellen, dass diese auf allen Monitoren innerhalb passt. Somit auf kleinen Monitoren auch kleiner wird auf größeren größer??

-MrSchledi
 
Auflösungen sind für Webseiten irrelevant. Man kann ja auch auf einem riesen 28 zoll Bildschirm das Browserfenster nur auf 1/3 des Bildschirm anzeigen, dann könnten die Texte, je nachdem wie Du sie prozentual definierst, auch sehr klein werden.
 
@MrSchledi: Mal interessehalber: Wie löst du das denn bei jeder anderen Software? Bei Text des Betriebssystems zum Beispiel.
 
Was ich eigentlich gemeint habe, ist dass wenn ich das Fester kleiner schiebe, die Schrift kleiner wird, selbst wenn es keinen Sinn ergibt, mein Lehrer in der Schule fände es gut wenn es so wäre. Das mit dem fontsize in prozent habe ich versucht, die schrift wird aber nicht kleiner
 
Degers schrieb:
Schriftgrößen lassen sich prozentual angeben. Einfach im CSS per font-size (font-size:100%) .
Zum Vergrößern anklicken....

Das ist aber meines Wissens nicht prozentual zu den Abmessungen des Rahmenelements, sondern prozentual zur Schriftgröße des Rahmenelements.

Eine Idee wären Media Queries.

HTML: 
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>

        <style type="text/css">            

            @media screen and (min-width: 200px) {
                body { font-size: 10px; }
            }
            @media screen and (min-width: 400px) {
                body { font-size: 20px; }
            }
            @media screen and (min-width: 600px) {
                body { font-size: 30px; }
            }
            @media screen and (min-width: 800px) {
                body { font-size: 40px; }
            }
            @media screen and (min-width: 1000px) {
                body { font-size: 50px; }
            }            

        </style>

    </head>

    <body>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum porttitor dui, non venenatis ligula sollicitudin ut. Sed ut quam sit amet metus consequat convallis eu id urna. Donec id nibh sem. Vestibulum commodo iaculis odio, lacinia cursus nisl egestas id. Mauris id tellus tristique felis malesuada sodales sed eu dui. Suspendisse potenti. Nulla tortor quam, luctus sed porttitor quis, interdum id dolor. Nulla facilisi. Phasellus ac enim ac nisi convallis consequat. Proin velit lorem, pretium id blandit ut, consectetur nec nunc. Nunc imperdiet tellus id massa cursus at vestibulum quam cursus. Donec sodales consectetur arcu ac dapibus. Duis pretium tortor eu purus placerat sit amet mollis tortor dictum.</p>

    </body>

</html>

Ich weiß nicht genau, wie es da mit der Browserunterstützung aussieht. Außerdem sind meines Wissens nur diskrete Abstufungen möglich.
 
Das mit den Media Queries ist schon perfekt. Genau so etwas habe ich gesucht, nur ist da der Nachteil, dass es nicht flüssig mit verkleinern des Browsers wirkt. Sind solche Sprünge drin
Gibt´s noch ähnliche Lösungen, wenn es keine geben sollte ist diese auch perfekt.


Danke an eure Hilfe
 
Mhm. Die Alternative dazu wäre dann wohl, die Schriftgrößen (vielleicht per Browserweiche nur im IE) per JavaScript in Abhängigkeit zu den Viewport-Maßen bei onresize zu setzen.

Geht auch, aber weniger abenteuerlich wird es dadurch auch nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben