[responsive/css] h1 grootte bepalen op basis van device

[PdeBie]

Op mijn website (http://patrickdebie.nl/) heb ik bovenin een h1 tag staan met de titel van mijn pagina.

De tekst varieert van vrij korte teksten als 'About Patrick de Bie' tot hele lange 'Patrick de Bie - Miscellaneous Photography'. Als het scherm nu te smal wordt, valt de tekst over de rest heen.

Wat ik eigenlijk wil is dat de h1 schaalt op basis van de resolutie van het scherm met een bepaald minimum en maximum (tekst moet ook niet te klein of te groot worden).

Ik heb al gekeken naar het schalen op basis van viewport (font-size: 4vw; bijvoorbeeld), maar hiermee blijft het probleem dat de tekst over de rest heen valt. Met overflow:hidden verdwijnt er een deel van de titel, dus dat is ook niet gewenst.

Ik weet dat het een vrij lange tekst is, maar deze wil ik liever niet inkorten.

Iemand ideeën?

url: http://www.patrickdebie.nl/
css: http://www.patrickdebie.nl/css/style.css

[André]

Cascading Stylesheet:

h1 { font-size: 20px; }

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

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

[itsleon]

De tekst valt over de rest heen doordat het header element een vaste hoogte. Zet deze op min-height:100px inplaats van height:100px en je hebt al aardig wat opgelost.

[TI_Observer]

de min-height 100px is een goede oplossing. Probleem is dan wel dat het streepje "-" een beetje awkward wordt weergegeven. Ik zou dat streepje in een span tag zetten en op display: none zetten met media queries voor wanneer het beeld te smal wordt.

[PdeBie]

Alleen blijft het font dan even groot wat ervoor zorgt dat je op een mobiel al eerst moet scrollen nog voordat je de foto's zien.

Ik ga dus toch voor André's oplossing
De height property heb ik weggehaald, want die veroorzaakte inderdaad ook deels het probleem.