Reszponzív tipográfia

2021-01-05

Az alábbi módszerrel a viewport-hoz igazíthatjuk a betűméretet, sorközöket, vagy akár margókat is.

Videó

Videó

CSS forráskód


html { font-size: 18px }
@media(min-width:480px) {
    html { font-size: calc(1em + .5vw) }
}
body { max-width: 85vw; margin-left: auto; margin-right: auto }
p { line-height: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem }

h1 { font-size: 3rem; margin: 2rem 0 }
h2 { font-size: 2rem; margin: 3rem 0 2rem 0 }
h3 { font-size: 1.5rem; margin: 2rem 0 1rem 0 }