1. 程式人生 > >移動端文字大小自適應

移動端文字大小自適應

一、字型設定:

移動端由於只需要考慮蘋果和安卓系統,所以字型不用設定太多,如無特殊需求,手機端無需定義中文字型,使用系統預設,蘋果系統預設中文字型是Heiti SC,android 系統預設中文字型是Droidsansfallback,2個系統的英文字型和數字字型可使用 Helvetica 。

body {
    font-family: "Heiti SC","Droidsansfallback","Helvetica Neue",Helvetica,sans-serif;
}

字型大小,在css預設的字型大小中,一般使用的單位是rem,為了相容谷歌瀏覽器的預設最小12px設定,把html的字型大小設定為100px,body的字型大小設定為0.14rem。

html {
    font-size: 100px;
}
body {
    font-size: 0.14rem;
}

二、使用js監聽視窗變化,改變字型大小

reFontsize();
window.addEventListener('resize',reFontsize,false);
function reFontsize() {
    var  winW = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = winW/750*100 + "px";
}