1. 程式人生 > >手機端頁面需要用rem設定字型大小的js程式碼

手機端頁面需要用rem設定字型大小的js程式碼

設定字型大小時使用是“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效果要好的多