html - Media Queries for responsive typography -


i'm trying find way make typography responsive. code follow. whenever refresh in dev tools doesn't seem have desired result. how can result have text displayed on phones, tablets , laptop/desktops?

 @media screen , (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;}   } 

did set viewport meta tag in html?

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

also, why don't use rems make more simple? specify initial html font-size , line-height , change rem value each query. read: https://css-tricks.com/confused-rem-em/


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -