rem是什麼? 如何使用呢?

2021-09-26 19:49:21 字數 1144 閱讀 1678

rem是什麼?

rem(font size of the root element)是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對于父元素的字型大小的單位。它們之間其實很相似,只不過rem計算的規則是依賴根元素,em是依賴父元素計算。

首先,瀏覽器的預設字型大小都是16px。

然後,ie9+,firefox、chrome、safari、opera 的主流版本都支援了rem。

就算對不支援的瀏覽器,應對方法也很簡單,就是多寫乙個絕對單位(比如px)的宣告。

為什麼要用rem

首先我們要了解移動端最麻煩的是什麼?

不同解析度的適配

具體來說,有的螢幕寬750px,有的螢幕寬640px,有的甚至更寬,如果你寫固定px,那麼要麼小的放不滿,要麼大的有大片留白。

怎麼辦?

如果元素固定占用螢幕空間(一般是指寬度而非高度,下同)的百分之幾就好了。

比如320px的10%是32px,640px的10%是64px,

那麼10個10%寬度的元素放在一起,那肯定就是100%,即擠滿螢幕(寬度),不會超出,也不會留白。

簡單來說:

rem 就是指螢幕寬度的百分之幾;

或者說,n個rem = 使用者可視區域的100% ;

那麼怎麼使用rem呢

首先使用js轉換

引入以下原生js**重置rem單位:

我用的是750px舉的例子

(function (doc, win) else

};if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

然後我們在css中使用rem作為單位就可以了(替換"px"),注意單位的換算

PMP是什麼?如何備考呢?

什麼是pmp?簡單一點說,pmp和專案管理是被包含和包含的關係,pmp是專案管理認證的一種,含金量還是比較高的,pmp可以說是衡量專案人員管理能力方面的乙個標準。它是由美國專案管理協會 pmi 發起的,嚴格評估專案管理人員知識技能是否具有高品質的資格認證考試。專案管理的是指在專案活動中運用專門的知識...

ms touch action是什麼呢

規定使用者能否以及如何操作頁面上的指定區域 注意 在ie11使用屬性,在ie10應使用 ms touch action,ie10之前的瀏覽器不支援 語法 touch acion auto none pan x pan y pinch zoom manipulation double tap zoom...

IPO是什麼呢?

ipo initial public offering 首次公開募股,指的是一家企業或者是股份 將自己的股份第一次向大眾 在這之前,有限責任公司需要將自己的公司身份轉變為股份 一般來說,在公司ipo之後,該公司就可以在 交易所或者是 系統申請掛牌交易。好處募集資金,吸引投資者 增強流通性 提高知名度...