Irish Enigma Irish Enigma - 1 year ago 77
CSS Question

Media Queries for responsive typography

I'm trying to find a way to make my typography responsive. My code will follow. Whenever I refresh in dev tools this doesn't seem to have the desired result. How can I get a good result to have text displayed well on phones, tablets and laptop/desktops? Thank you!

@media only screen and (min-width: 320px)
html {line-height: 1.25em, font-size: 16px;}
h1{line-height: 1.25em, font-size:32px;}
h2{line-height: 1.15384em, font-size:26px;}
h3{line-height: 1.136363em, font-size:22px;}
h4{line-height: 1.111111em, font-size:18px;}

Answer Source

Did you set your viewport meta tag in your HTML?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, Why don't you use REMs for this to make it more simple? You could specify the initial html font-size and line-height and then change the REM value for each query. Read: