css中設置字體單位有三種:px,em,rem
px是絕對單位,用px設置字可以保證設置的精准度;
em比較繁瑣,所以現在移動端的web流行使用rem作為字體相對單位;
rem是一種相對單位,相對於本頁面的根字體大小而設置;通常用法:
html{
font-size:62.5%;
}
設置跟字體為62.5%即網頁的默認字體一般為16px,這樣設置可以令1rem == 10px方便計算;
針對大小屏幕的適應問題可以通過媒體查詢的方法重新設置跟字體大小適應不同大小的手機屏幕eg:
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}