css3的字體大小單位[rem]到底好在哪？

rem做法

html{ font-size:14px}


那麼如引用.test-box font-size/width/height 設為2rem的話就相當於 2*14px。也就是

.test-box{
font-size:2rem;
/*font-size:28px;*/
/*2*14px/
}


我們可以理解為，一旦根節點html 定義的 font-size 變化，那麼整個網頁中運用到 rem的也會變化。

我們來看一下【淘寶】的實例：

iPhone4下的效果。

iPhone6下的效果。

iPhone6 Plus下的效果。

&


&


&


具體大家可以去看【淘寶】的移動端頁面的案例。

給大家介紹一片寫rem的詳細文章。騰旭ISUX的一篇文章。

1. 一個App里native界面和Web界面混合使用時，rem在不同尺寸屏幕上的適配與native界面適配不一致。
   這樣會導致在部分機型及屏幕上，一個App內同一個控制項在native界面和Web界面上的尺寸不一致。比如：列表頁是用native做的，詳情頁是用rem做的，設計師希望列表頁與詳情頁字型大小都一致，換算rem時如果用iPhone5的尺寸換算，那麼在Plus上，詳情頁的字型大小會大於列表頁。
2. rem在多屏幕尺寸適配上與當前兩大平台的設計哲學不一致。
   iOS與Android平台的適配方式背後隱藏的設計哲學是這樣的：閱讀文字時，可讀性較好的文字字型大小行距等絕對尺寸數值組合與文字所在媒介的絕對尺寸關係不大。（可以這樣簡單理解：A4大小的報紙和A3大小甚至更大的報紙，舒適的閱讀字型大小絕對尺寸是一樣的，因為他們都需要拿在手裡閱讀，在手機也是上同理）；在看圖片視頻時，圖片、視頻的比例應該是固定的，不應該出現拉伸變形的情況。而rem用在字型大小時，使字型大小在不同屏幕上的絕對尺寸不一致，違背了設計哲學。

你可能會給 html/body 元素定義一個字體大小，來作為整個頁面的參考值，我們後面稱它為 base 好了。

老闆說：這部分是正文，字體要大一些，行間距也大一些，看著明顯。你就可以給 article 元素設置 1.4 倍的字體大小(1.4em)，這時候，正文里的標題 h2 可以設置成 2em，這時候它的字型大小已經是 base 的 2.8 (1.4*2) 倍了。

然後設計師跑過來說：圖片下面的註解字體太大了，跟正文無法區分。你想把它設置成和 base 一樣大，是 0.714em (1/1.4) 嗎？NO，是 1rem。

因為 em 是相對於父元素的倍數，所以你可能在許多層嵌套的 em 中找不到一個固定值，rem 就是可以隨時拿來用的一個固定參考值。

———————————

為什麼建議網頁的全部 *文本* 都用 em/rem 來設置大小呢？

有了這個 base 變數，就可以只修改一個值，來改變所有文字的大小了。因為它們都是 base 的倍數。

就像瀏覽器提供的頁面縮放功能那樣，不過這裡是只縮放文本。

最大的好處是計算方便。

移動端適配等式:

可以推出它的實際高度為10，通常我們使用rem作為等式前的值，但是因為太小無法作為html根字體大小使用，所以適當放大，通常為了方便計算，放大100倍，即為:

那麼此時在設計稿上量的的某一距離，比如43px，就等於0.43rem。

至於文字，我們通常不用rem，因為由於不同的rem計算方式會產生很多奇怪的大小，使得文字出現糊掉或者模糊的情況，通常我們使用媒體查詢事先設置好body的字體大小，這樣來確保文字的正常顯示。

rem的出現 使很多 移動端的自適應得到了改變，因為 rem是指相對於根元素的字體大小的單位，em是指相對於父元素的字體大小的單位 ，px是固定像素；

用過em的知道就會知道那個有多坑爹，因為它是相對於父元素的字體大小的單位，那如果你要設置一個元素的寬度，高度，那麼就得去看他父級的大小，如果父級也是em單位，你又得去找他的父級，得一層層計算，才能得到準確的像素值~

px固定像素呢，用的也是最多的了，可是問題在於，移動端都設置是固定像素，會導致，你在iphone4下看起來還可以啊，放到iphone6下，卧槽，這個也太丑了，怎麼這麼小，可能設計師都不答應~

所以，現在出現rem，它是相對於根元素的字體大小的單位，也就是說，你只要html根元素定義一遍下面就可以直接使用，現在，移動端最多的用法就是，前置一段腳本，計算當前設備的尺寸，根據尺寸動態定義根元素的字體大小，這樣 你 頁面定義的元素就可以自適應的改變~看起來是不是很酷，這個可比以前寫媒體查詢方便的多~

媒體查詢不近代碼量大，而且維護成本也高，所以還是挺推薦 rem 的，例子樓上已經 放圖了，我這裡也就免了吧~

用在適配不同尺寸屏幕時，css中使用rem作為單位，代碼就只需要寫一遍。在適配部分只需要如下：

rem單位其實是很棒的，但我覺得現在主流的用法不太合適。方案有個根本的問題要先回答，為什麼要讓一稿設計在不同設備上等比縮放呢？我相信很多時候這是設計師的要求，那這個設計師很可能是在偷懶。

充分了解各種設備，就應該知道不同尺寸的屏幕本身就有各自的定位。7 plus本來就應該要比7有更大的視野，而不是如此粗暴地讓大屏手機用戶看到老人機一般的界面。

現在最常見的rem用法是根據屏幕大小改變根元素的font-size，從而等比縮放界面元素。如果用戶買大屏手機是為了更大視野，這麼做顯然讓他們失望了；如果他們是因為視力不佳需要更大的字，他們早就設法在系統級上把字型大小調大了。

更新！版本號在54以上包括54的chrome已經支持10px的字體了，各位可以試試！

-------------------------------------------------------------

html{
font-size: calc(100vw/10);
}


rem用於移動端頁面兼容各種手機解析度十分好用,上述方法定義了1rem=屏幕寬度/10,也就是說1rem=屏幕寬度的10%,100vh/10就是高度的10%,之所以是10%而不是除以100定1%是因為最小字型大小限制在12px;

body{
width:100%;
max-width:640px;
}
&
if(window.innerWidth &> 640)document.documentElement.style.fontSize = 64 + "px";
&


在前幾年，為了統一不同屏幕尺寸下的瀏覽效果，rem可以說是非常好用的一個屬性，通過針對不同視口設置不同的body font-size，可以讓各種千變萬化的屏幕獲得相同的瀏覽體驗。

但是在今天，rem這個屬性應該是不太適合現如今的前端開發環境了。

首先，今天大屏手機已經成為市場主流，大部分手機屏幕都在5寸左右，安卓陣營通常是小屏4.6英寸，普通屏幕5.15英寸，大屏5.5英寸。蘋果陣營一般正代機4.7英寸，plus5.5英寸。如果統一按照px來進行頁面設計，瀏覽效果不會相差太多。比較特殊的小屏機iphone se和各種6英寸以上的機型只要沒有嚴重的兼容性問題也不大。

其實，關於rem和px，主要的矛盾就是，當手機屏幕變大的時候，是看的更多，還是看的更大但一樣多。如果直接上rem，原本為5.15英寸屏幕設計的頁面，在4英寸的iphone se上，各種元素均會縮小，字體以及圖標會難以閱讀和點擊。

還有，現如今有更好的vw，vh屬性可以利用，vw屬性作用可以看做是增強版的rem，簡單粗暴。

rem是一種簡單粗暴解決不同屏幕下視圖的區別的一種方案，其實就相當於一種hack，就是因為簡單粗暴有效，所以廣泛使用，形成一種共識，甚至帶來對rem這個單位的誤讀，個人不建議用rem進行布局，移動設備瀏覽器上的px其實就是dp，已經是最佳對不同尺寸手機的最佳處理方案，特別涉及到跨平台的native開發，px不會有任何差異，反倒rem，會帶來開發的障礙。

引用 @大米乾飯 的說法，其實歸根到底就是大屏幕的作用問題，我偏向於看更多內容，所以我是不用rem派的

我覺得可以先來討論下大屏的出現到底是為了看得又大又清楚，還是為了看的更多，然後再討論rem。

rem現在兼容性IE8還不支持，不過在移動端可以大膽使用了，會非常方便，減少很多CSS代碼，方便提高工作效率

說用 rem 然後把 html 設置成 font-size:10px 的，沒有遇到這個 bug 嗎？

1. html 的 font-size 設置為 10px
2. p 的 font-size 設置為 2rem
3. p 的 margin 設置為 2rem
4. 結果 p 的 font-size 被渲染成了 20px，p 的 margin 被渲染成了 24px

CodePen: https://codepen.io/anon/pen/peKKZY

相關問題：

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent,

rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design.

As in, scale the type in that specific area relatively.

I have tended to like rem because
of the ability to scale type across the entire page easily, but I"ve
gotten into issues where that wasn"t good enough control so I could see
moving back to em for that reason.

Direct Link →Confused About REM and EM?

我的個人專業網站 htpp://liuyao99.top/ 目前一直用的px，移動端也是，就用了媒體查詢，感覺夠用了，不知道rem是不是完全可以一套適配移動設備包括行距等比例等因素！