Schriftgröße der Überschriften an Bildschirmgröße anpassen

Also ich habe das Problem, dass sich meine z.B. <h1> nicht anpasst, wenn das Browserfenster kleiner wird.

Code:

---

h1 { font-size: 30px; color: #FFFFFF !important; margin: 0 0 20px ; padding: 0 0 10px 0; font-weight: 200; line-height: 1.2;}

---

So ist h1 aktuell definiert. Mir ist klar, dass es wohl daran liegt, dass die Schriftgröße mit 30px fest definiert ist. Aber wie schaffe ich es, dass h1 auf dem Desktop-PC noch immer so groß ist wie jetzt, aber kleiner wird, je kleiner das Browserfenster wird? Stichwort Handys.

Das hier ist der Link: http://www.delco.de/contao/index.php/delfi.html

Wenn man da jetzt das Browserfenster verkleinert, steht die Überschrift irgendwann außerhalb des Kastens, einfach weil die größe immer gleich bleibt, egal wie klein der Bildschirm ist. Wie bekomme ich es hin, das Responsive zu machen?

http://simplefocus.com/flowtype/

Damit erreichst du aber auch nur eine relative Größenänderung - und nicht individuell je nachdem wie lang die Überschrift ist bspw. (was ja tlw. auch dämlich aussehen würde).

Und das ist die einzige Möglichkeit? Das lässt sich nicht einfach mit CSS umsetzen? Dann müsste ja jede Webside weltweit, dieses script benutzen und das kann ich mir kaum vorstellen irgendwie. Das ist nicht bös gemeint, falls das so klingen sollte.

Geht das nicht irgendwie mit %-Angaben oder sowas?^^

Zitat:

---

Zitat von Wrathberry

Dann müsste ja jede Webside weltweit, dieses script benutzen und das kann ich mir kaum vorstellen irgendwie.

---

Hm, aus dieser Aussage schließe ich, dass du ein ganz bestimmtes Verhalten im Sinn hast. Wenn ja, dann zeige mal ein Beispiel auf einer Website wie es sein soll.

Nein, natürlich brauchst du nicht dieses Script. Alternativ zum Script kannst du es über die CSS-Medienabfrage lösen!

Und nochmal der Hinweis: Lern CSS! Hatte ich dir ja bereits im anderen Thread gesagt!

Zitat:

---

Zitat von Spooky

Hm, aus dieser Aussage schließe ich, dass du ein ganz bestimmtes Verhalten im Sinn hast. Wenn ja, dann zeige mal ein Beispiel auf einer Website wie es sein soll.

---

nein, das meinte ich damit nicht. Ich meinte, dass das für mich irgendwie kompliziert klingt, extra son Script dafür zu installieren, für eine irgendwie so einfach wirkende Funktion.

Ich will ja nur, dass die Überschriften mit Verkleinerung des Fenster auch kleiner werden, so dass sie nicht irgendwann so groß sind wie das komplett Fenster. Wenn ich das Fenster verkleinere, wird ja der Rahmen um den Text auch automatisch kleiner, die Überschrift aber irgendwie nicht, und das verstehe ich nicht.

@the_scrat: Was erwartest du? Dass ich von jetzt auf gleich css-Profi bin? Ich lerne gerade CSS, da hilft es mir sicher nicht, wenn du 10x schreibst: "lern CSS", anstatt zu versuchen mir zu helfen. Ich weiß nicht, warum hier ständig davon ausgegangen wird, dass jeder User direkt nen CSS-Profi ist. Dann bräuchten wir auch keine Foren mehr, soll sich halt jeder alles selbst beibringen. Ich hab innerhalb der letzten Tage einiges an CSS gelernt, verstehe nun wie die Beziehungen funktionieren, wie die Syntax funktioniert, wie man Klassen definiert usw..

Tut mir leid, dass ich nicht jedes Detail direkt kann... es arbeitet halt nicht jeder schon seit Jahren mit CSS..

edit: Für mich als CSS Anfänger war halt klar, dass sich die Schrift innerhalb einer Box, genauso anpasst, wie die Box an sich, wenn der Bildschirm kleiner wird. Das tut sie aber scheinbar nicht und das ist für mich auf den 1. Blick halt unlogisch..

Zitat:

---

Zitat von Wrathberry

nein, das meinte ich damit nicht. Ich meinte, dass das für mich irgendwie kompliziert klingt, extra son Script dafür zu installieren, für eine irgendwie so einfach wirkende Funktion.

---

Naja, du schreibst aber:

Zitat:

---

Zitat von Wrathberry

Dann müsste ja jede Webside weltweit, dieses script benutzen.

---

Insofern müsstest du ja ein Beispiel dafür haben, was du gerne hättest.

Zitat:

---

Zitat von Wrathberry

Ich will ja nur, dass die Überschriften mit Verkleinerung des Fenster auch kleiner werden, so dass sie nicht irgendwann so groß sind wie das komplett Fenster.

---

Wenn du haben möchtest, dass die Schriftgröße sich proportional zur Viewport Breite verändert, dann kannst du eben das von mir erwähnte JavaScript einsetzen. Wenn du haben möchtest, dass sich die Schriftgröße nur ab bestimmten Viewport Breiten verändert, dann kannst du das einfach mit CSS Media Queries umsetzen.

Zitat:

---

Zitat von Wrathberry

Wenn ich das Fenster verkleinere, wird ja der Rahmen um den Text auch automatisch kleiner, die Überschrift aber irgendwie nicht, und das verstehe ich nicht.

---

Block Level Elemente und Text sind nun mal nicht dasselbe. Ein Block Element verhält sich by default so, dass es die maximale Breite seines Parents einnimmt - und ist daher auch (von beinflussendem CSS mal abgesehen) auch automatisch immer nur maximal so breit wie der Viewport.

Bei Text legst du eine gewisse font-size fest und jeder einzelne Buchstabe wird in dieser Größe gerendert.

Zitat:

---

Zitat von Wrathberry

edit: Für mich als CSS Anfänger war halt klar, dass sich die Schrift innerhalb einer Box, genauso anpasst, wie die Box an sich, wenn der Bildschirm kleiner wird. Das tut sie aber scheinbar nicht und das ist für mich auf den 1. Blick halt unlogisch..

---

Nein, Text bricht einfach um (sofern nicht anders festgelegt).


// edit: FitText.js ist evt. besser geeignet.

Mal von der technischen Umsetzbarkeit abgesehen, macht eine solche proportionale Verkleinerung meist auch gar keinen Sinn. Es sollte ja schon noch lesbar bleiben. Das wäre bei deiner Überschrift zwar wohl noch der Fall, aber beim restlichen Text dann eher nicht mehr. Und wenn du den nicht auch kleiner machen würdest, wäre das Größenverhältnis zwischen Überschrift und normalem Text abhängig von der Display-Größe.

Zitat:

---

Zitat von tab

Mal von der technischen Umsetzbarkeit abgesehen, macht eine solche proportionale Verkleinerung meist auch gar keinen Sinn. Es sollte ja schon noch lesbar bleiben. Das wäre bei deiner Überschrift zwar wohl noch der Fall, aber beim restlichen Text dann eher nicht mehr. Und wenn du den nicht auch kleiner machen würdest, wäre das Größenverhältnis zwischen Überschrift und normalem Text abhängig von der Display-Größe.

---

Ja, genau. Die Befürchtung hab ich auch. Wenn cih son Script einbinde, wird ja ALLES automatisch kleiner und der Text is dann nciht mehr lesbar. Der Text ist ja vollkommen okay, es geht mir ja rein um die Überschriften. Naja, mal schauen. Vielleicht finde ich noch ne anständige Lösung^^

Naja, einen Ansatz hast du ja schon selbst gefunden: Bei schmalen Displays nur noch eine Spalte. Der Rest geht eben z.B. mit media-queries. Damit kannst du z.B. CSS eingeben, das nur für bestimmte Viewportbreiten gilt. Also z.B. für sehr schmale oder sehr breite ;). Da könntest du also z.B. die Schriftgröße für h1, h2, p, a, ... entsprechend abhängig von der Viewportbreite setzen.

Zitat:

---

Zitat von Wrathberry

Ja, genau. Die Befürchtung hab ich auch. Wenn cih son Script einbinde, wird ja ALLES automatisch kleiner und der Text is dann nciht mehr lesbar. Der Text ist ja vollkommen okay, es geht mir ja rein um die Überschriften. Naja, mal schauen. Vielleicht finde ich noch ne anständige Lösung^^

---

Das JavaScript (vor allem das Zweite von mir gepostete) kannst du auch gezielt nur für bestimmte Überschriften einsetzen.

@Wrathberry

1. habe ich dir sogar die Lösung geschrieben, zwar nicht "vorgekaut" wie du es gerne hättest (als fertigen CSS Code der nur eingebaut werden muss) sondern mit dem Hinweis auf die CSS-Medienabfrage einen Anhaltspunkt gegeben wo genau das Problem liegt. Da kann man ja wohl erwarten, dass du evtl. danach googlelst oder dich in die Thematik einliest! Aber das wurde von deiner Seite ja großzügig ignoriert :-)

Ich will mich meinen Vorrednern anschließen, dass ist wirklich ein sehr spezielles Thema. Ich glaub man kann mit Javascript (fittext.js) am besten ein echtes, flüssiges font-size umsetzen. Die andere Möglichkeit wäre über Media-Queries.

Ließ mal folgende Artikel:
http://stackoverflow.com/questions/1...esponsive-grid

Eventuell auch:
https://css-tricks.com/viewport-sized-typography/ (funktioniert aber nur in modernen Browsern)

Zitat:

---

Zitat von the_scrat

@Wrathberry

1. habe ich dir sogar die Lösung geschrieben, zwar nicht "vorgekaut" wie du es gerne hättest (als fertigen CSS Code der nur eingebaut werden muss) sondern mit dem Hinweis auf die CSS-Medienabfrage einen Anhaltspunkt gegeben wo genau das Problem liegt. Da kann man ja wohl erwarten, dass du evtl. danach googlelst oder dich in die Thematik einliest! Aber das wurde von deiner Seite ja großzügig ignoriert :-)

---

Ich hab das nicht ignoriert und auch schon danach gegoogled :), sorry wenn das so rüberkam. Mir gefiehl die Lösung nur einfach nicht, weil sie wieder mit einiges an Einlesen von meiner Seite verbunden ist, das gebe ich zu :).
Deshalb hatte ich gehofft, dass es einfach nen CSS Befehl gibt, und fertig. Einfach weil das Problem für mich so trivial wirkt, was es aber offensichtlich nicht ist..^^

Vielleicht mache ich die Überschriften einfach kleiner *lol* :D.

Danke jedenfalls für deine Hilfe und natürlich auch an alle anderen :)

Ich hab mich nun ein wenig in die Media-Queries eingelesen und so kompliziert ist es ja garnicht :D.

Aber ich scheine noch was am Syntax falsch zu machen.

Ich hab das doch richtig verstanden, dass ich die Media-Queries direkt in mein design.css einbinden kann oder?

Wenn ich nun angeben will, dass h1 ab einer gewissen bildschirmgröße kleiner werden soll, mache ich das doch folgendermaßen oder?

Code:

---

@media screen and (max-width: 640px) {
h1 {
font-size: 18px;
}
}

---

Falls das richtig ist, wo genau muss ich das nun hinschreiben? Einfach als eigenständige Zeile in meiner design.css? Oder muss ich das den eigentlichen Anweisungen für h1 verschachteln? Das hab ich bisher noch nicht so ganz rausgefunden.

Das Problem was ich mit dem Javascript habe ist btw dass ich keinen Schimmer habe wie ich das einbinde, nachdem ich es gedownloaded hab.. aber mal chauen irgendwie krieg ich das auch noch raus :D

Zitat:

---

Zitat von Wrathberry

Ich hab mich nun ein wenig in die Media-Queries eingelesen und so kompliziert ist es ja garnicht :D.

---

whaaaaaat? :eek: Nicht zu fassen :p



Also das Problem ist, wenn du dir mal deine CSS Datei anschaust, dass direkt nach deiner Media-query das H1 wieder überschrieben wird.
Du müsstest deine Media-query nur nach unten verschieben, denn CSS wird immer von oben nach unten abgearbeitet....

Edit: Und entferne das "!important" bei H1

Anhang 16083

Ich hab das Ganze nun umgedreht, ändern tut sich leider nichts. Auch wenn ich das !important da rausnehme. Das hab ich übrigens da drin, weil die Definition der Überschriften von irgendwo überschrieben wird, wenn ich da kein !important vorsetze und ich krieg nicht wirklich raus, von wo^^.

edit: firebug sagt mir folgendes:

Code:

---

h1, h2, h3 {
    color: #151517;

---

http://www.delco.de/contao/assets/css/c730ba47a632.css Und da Ganze soll in der Datei sein. D.h. von dort wird meine Anweisung in der design.css überschrieben. Wenn ich aber in die Datei gucke, steht das da nirgendwo, vor allem nicht in der Zeile in der es laut Firebug angeblich stehen soll.

Also im Firebug zeigt er mir an, dass im span die 30px fest hinterlegt sind! Schau also mal dort, wo die Überschrift drin steht (Text-Element).

Zitat:

---

Zitat von the_scrat

Also im Firebug zeigt er mir an, dass im span die 30px fest hinterlegt sind! Schau also mal dort, wo die Überschrift drin steht (Text-Element).

---

VIELEN DANK! :D Das war es tatsächlich. Aus welchem Grund auch immer, hab ich im Artikel die ÜBerschrift zwar als <h1> deklariert, aber zusätzlich noch deklariert, dass diese 30px groß sein soll, was dann natürlich alles andere überschreibt.

Vielen dank für deine Hilfe :)