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
Post a Comment