手機端頁面需要用rem設定字型大小的js程式碼
阿新 • • 發佈：2018-12-23
設定字型大小時使用是“px”為單位是比較方便，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，就是字型不會隨網頁的大小而變化，這樣比例就會失調，要解決這個問題，我們可以使用“em”單位。
這種技術需要一個參考點，一般都是以<body>的“font-size”為基準。比如說我們使用“1em”等於“10px”來改變預設值“1em=16px”，這樣一來，我們設定字型大小相當於“14px”時，只需要將其值設定為“1.4em”。
為什麼“li”的“1.4em”是不是“14px”將是一個問號呢？如果你瞭解過“em”後，你會覺得這個問題是多問的。在使用“em”作單位時，一定需要知道其父元素的設定，因為“em”就是一個相對值，而且是一個相對於父元素的值，其真正的計算公式是：
1
÷ 父元素的font-size × 需要轉換的畫素值 = em值
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。
那麼怎麼用js設定我們要引用rem呢
document.getElementsByTagName_r("html")[0].style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth)+"px";
rem可以用在pc端也可以用在手機端，手機端用rem比用px效果要好的多