整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
em 是 CSS3 新增的一個相對單位，相對于根節(jié)點(html)字體大小的值，r 就是 root html{font-size:10px} ，則 2rem=20px，通過它就可以做到只修改根元素的大小，就能成比例地調整所有的字體大小，只依賴 html字體的大小。
適配方案步驟：
1、首先動態(tài)計算 html 的 font-size
2、將所有的 px 換算成 rem(計算過程請看下面代碼和注釋（注意：rem 的換算是根據(jù)設計圖稿的像素計算的，下面的計算只是動態(tài)計算 html 的 font-size 大?。?，請看下面的注意事項：
注意：
1、必須動態(tài)地去設置 html 的大小，才能適配
2、根據(jù)頁面的寬度除以一個系數(shù)，把算出的這個值賦給 html 的 font-size 屬性，rem 換算值是根據(jù) psd 設計圖的寬度/系數(shù)的 rem 系數(shù)以 640px 設計稿和 750px 的視覺稿，網易這樣處理的：
這樣不管是 750px 設計稿還是 640px 設計稿，1rem 等于設計稿上的 100px。故 px 轉換 rem 時：1rem=1px * 0.01;
在 750px 設計稿上：
故對于設計稿上任何一個尺寸換成 rem 后，在任何屏下對應的尺寸占屏幕寬度的百分比相同。故這種布局可以百分比還原設計圖
（2.1）為什么要除一個數(shù)字，原因是：一個頁面里，不可能全都是整屏的元素，肯定有一行中放多個元素。所以就把一行分成 n 份。
（2.2）不除一個數(shù)字的話，那 1 個 rem 就是屏幕的寬度，這個值太大，如果一個元素的寬度比它小的話，就不方便計算。
（2.3）這個系數(shù)，自己定。多少都可以，但是建議給一個能整除的值（這個能整除的數(shù)，還要根據(jù)設計稿能整除的數(shù)。）
3、對于切的圖片，尺寸是根據(jù)設計圖的尺寸寬度的，顯示起來會很大，如果是 Img 標簽，可以設置寬度為切出的圖片尺寸，換算成 rem，如果是 background-img，用background-size 屬性，設置設計圖尺寸寬高，換算成 rem 進行圖片的縮放適配。
對于上述的第二點，根據(jù)設計稿動態(tài)轉換 rem，這里說一下，前面的計算是動態(tài)的設置 html的 font-size 的大小，這是根據(jù)設備的獨立像素計算的。而設計稿往往是根據(jù)物理像素，即設備像素設計的，往往很大，是 750px 及以上，所以在轉換 rem 的時候，轉換是根據(jù) psd設計稿的像素進行轉換，即 1rem=設計稿像素寬度/系數(shù)，例如，如果是 1080px 的設計稿，那么，就用 1rem=1080/18=60px（這里用 18 做系數(shù)，是因為能整除），然后布局的時候就根據(jù)設計稿的元素尺寸轉換，例如設計稿一個元素的高為 60px，那么就可以轉化為 1rem 了。
特點：
1、所有有單位的屬性會根據(jù)屏幕的尺寸自動計算大小
2、同樣一個元素，在不同的設備下的大小是不一樣的。在尺寸小的設備下顯示的小，在尺寸大的設備下顯示的大
3、一般以 iphone6 為基準，以它的寬度 750 除上一個系數(shù)，再去算 rem
Tips：上述步驟 2 中換算可以通過 Hbuilder 將 px 自動轉 rem 以及通過 less 自動計算成 rem，sublime 也可以通過插件進行自動轉換
（3.1）打開 Hbuilder，頂部欄的工具》選項》Hbuilder》代碼助手》px 自動轉 rem 設置
（3.2）less 自動轉換：Hbuilder 也可以將 less 文件自動轉成 css 文件。less 文件的書寫如下所示：
彈性布局適配(會配合 rem 適配使用 )
兼容情況
IE10 及以上、ios9 及以上、android4.4 及以上版本支持
特點1、默認所有子元素都會在一行中顯示，即使給子元素一個很大的寬度
2、父級加了這條屬性，子級的 float、vertical-align 就會失效
3、如果兼容低版本的機型要加前綴-webkit-，包括后面講的所有屬性容器屬性（父元素樣式） 具體看菜鳥教程或阮一峰的教程，這里說一下一些重點知識。
（3.1）flex-direction：子元素排列方向（主軸的方向，如果設置了 column，則意味著主軸旋轉了 90 度）
（3.2）flex-wrap：換行方式
（3.3）flex-flow：以上兩種方式的簡寫
（3.4）justify-content：水平對齊方式（子元素在主軸上的對齊方式）
（3.5）align-items：垂直對齊方式（子元素在交叉軸上的對齊方式）
（3.6）align-content：多行垂直對齊方式（多根軸線的對齊方式）
項目屬性（子元素樣式）
1、order：排列位置 //如果有兩個的值是相等，按書寫順序排列
2、flex-grow：擴展比例
flex-grow 當父級的寬度大于所有子元素寬度之和時，根據(jù)父級的剩余空間，設置子元素的擴展比例（設置后，元素給的固定寬度會被覆蓋）它是一個系數(shù)默認為 0，即如果存在剩余空間也不擴展。
剩余空間：剩余空間=父級的寬度-所有子元素的寬度和
注意：如果沒有設置初始寬度，也沒有內容，則默認為 0，否則為內容的寬度。例如設置了文字，會撐開有初始寬度。
子元素寬度計算公式
子元素的寬度=（父級的寬度-所有子元素的寬度和）/所有子元素的 flex-grow 屬性值之和*子元素的 flex-grow 屬性值+子元素初始寬度
3、flex-shrink：收縮比例
flex-shrink 當所有子元素寬度之和大于父級寬度的時候，根據(jù)超出的空間，設置子元素的收縮比例（設置后，元素給的固定寬度會被覆蓋）它是一個系數(shù)默認為 1，如果給個 0 的話，就不會收縮。
超出空間：超出空間=所有子元素的寬度和-父級的寬度
子元素寬度計算公式
1、算出超出空間，所有子元素的寬度和-父級的寬度
2、子元素的初始寬度*子元素的 flex-shrink 值
3、算出第二步所有結果的和
4、每個子元素的第二步/第三步*第一步
5、子元素的初始寬度-第四步
flex-basis：元素的大小
flex：以上三個屬性的簡寫
align-self：單獨的垂直對齊方式（交叉軸方向上）
單闡述下px、em、rem之前的關系
為什么要選擇rem？
px：像素是相對于顯示器屏幕分辨率而言的相對長度單位。pc端使用px倒也無所謂，可是在移動端，因為手機分辨率種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。
em：繼承父級的，假設html的font-size默認為16px，body字體大小定義為50%，那么在body里字體大小就是1em=8px了?？僧斈阌侄x了一個div，然后把字體設置成了50%，請問，現(xiàn)在div下的1em等于多少？因為繼承了父級的值，現(xiàn)在這個div里的1em=4px，這么嵌套下去的話，抱歉，我數(shù)學不好！所有rem就出現(xiàn)了。
rem：是em的升級版，rem只會相對html的值，不會受到父級的影響，這樣的好處在于：從em里的例子來講，1rem始終會等于8px。使用的時候不需要重新計算rem此時的大小。rem因為是css3增加的，所以ie8或以下請無視（始終想不明白，為什么國人至今對微軟都放棄的ie這么戀戀不舍）。
以上也算是講清了他們之間的區(qū)別和關系，rem更多的運用于移動H5頁面的適配使用。
下面來說說怎么更方便的使用rem和自己開文處提到的坑！
之前遇到的坑是這樣的。瀏覽器默認的字體大小都是16px（注意這里），所以要使1rem=10px，那么只要在html選擇器中聲明Font-size=62.5%（10÷16*100%=62.5%）就可以直接使用1rem=10px單位進行換算，其實這個算法是沒有錯的?？墒牵睦飦淼淖孕抛屆總€瀏覽器默認字體都是16px？？？？反正我也不知道自信哪來?！，F(xiàn)在Chrome默認大小可以是12px也可以是16px，那么問題來了，國內瀏覽器，有幾個不是用的谷歌內核。所以html選擇器中聲明Font-size=62.5%，1rem就等于10px的換算就有點坑爹了，對于我這種一個像素都糾結的人來說，很蛋疼。這坑是我當時買書學h5的時候預留下的后遺癥，現(xiàn)在這個毛病還有，因為快和方便 T_T!真是矛盾。。。
因為rem是相對html的，那么只要將html選擇器設置一個絕對大小的值：比如在html選擇器設置font-size：20px；那么1rem=20px（解釋下為什么是20而不是其他的，首先10的倍數(shù)容易計算，那為什么不是10本身而是20？現(xiàn)在Chrome最小的字體是12px，所以10px是無效的，進一步就取20px）；現(xiàn)在是不是和效果圖一個像素都不差？?。?！
且要兼容手機各個分別率，使用媒體查詢media 可以設置不同的大小，這樣在常規(guī)的設備中都可以精準到每一個像素。
這么換算來換算去好麻煩有木有??！所有發(fā)現(xiàn)了下面的換算工具，媽媽再也不用說我數(shù)學題不會做了！
下面是我直接在工具復制過來的現(xiàn)成rem換算適配代碼↓（設計稿寬度：640，字體值：20）
@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
html,body {
font-size:16.875px;
}
}
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
html,body {
font-size:15px;
}
}
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
html,body {
font-size:12.5px;
}
}
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
html,body {
font-size:11.25px;
}
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
html,body {
font-size:10px;
}
}
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
html,body {
font-size:9.375px;
}
}
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
html,body {
font-size:8.4375px;
}
}
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
html,body {
font-size:7.5px;
}
}
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
html,body {
font-size:6.46875px;
}
}
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
html,body {
font-size:6.25px;
}
}
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
html,body {
font-size:5.859375px;
}
}
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
html,body {
font-size:5.625px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
html,body {
font-size:5px;
}
}
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
html,body {
font-size:3.75px;
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！
em 和 rem這種相對長度單位進行頁面排版是web開發(fā)中的最好的選擇。在頁面排版中較好應用em 和 rem，根據(jù)設備尺寸縮放顯示元素的大小。這就使得組件在不同設備上都達到最佳的顯示效果成為可能。
web開發(fā)中該用 em 還是 rem 呢？
但問題是究竟該用 em 還是 rem 呢？關于這個問題一直存在比較大的爭議。本文將會給大家介紹究竟什么是 em 和 rem 和如何進行兩者的選擇，以及結合兩者優(yōu)勢構建模塊化的web組件。
em 是相對長度單位。它相對于當前元素字體尺寸，即font-size。舉例來說，如果當前元素的字體是20px，那么當前元素中的1em就等于20px。
h1 { font-size: 20px } /* 1em=20px */
p { font-size: 16px } /* 1em=16px */
實際開發(fā)中，用相對長度單位（如 em）表示字體大小是WEB開發(fā)中的最好的選擇。請看下面的代碼：
h1 { font-size: 2em }
這里的h1元素字體大小究竟是多少呢？
這時，我們需要根據(jù)<h1>父元素字體的大小，來計算<h1>字體的尺寸大小。如果父元素是<html>，而且<html>的字體大小是16px。就可以計算出<h1>的字體大小是32px，即2*16px。
用代碼表示如下：
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2=32px */
設置<html>字體的大小一般來說都不是一個好主意，因為這樣重寫了用戶瀏覽器的默認設置。相反，可以使用百分比值或者根本不聲明<html>字體大小
html { font-size: 100% } /* 缺省 16px */
對于大多數(shù)用戶或瀏覽器，字體缺省大小是16px（未做瀏覽器缺省字體尺寸設置）。
em 還能用來指定除字體大小外的其它屬性，象margin或padding等屬性都可以用em來表示。
看下面的代碼， 對于<h1>和<p>元素，margin-bottom值應該是多少？ （假設<html>的字號被設置為100％）
h1 {
font-size: 2em; /* 1em=16px */
margin-bottom: 1em; /* 1em=32px */
}
p {
font-size: 1em; /* 1em=16px */
margin-bottom: 1em; /* 1em=16px */
}
上述<h1>和<p>的margin-bottom都是1em，但是外邊距結果值卻不相同。上述現(xiàn)象的出現(xiàn)，是因為em是相對于當前元素字體的大小。由于<h1>中的字體大小現(xiàn)在設置為2em， 因此<h1>中其它屬性的1em值就是 1em= 32px。這里比較容易引起誤解的地方。
rem表示 root em，它是相對于根元素的長度單位。這里根元素就是<html>中定義的字體大小。這意味著任何地方的1rem總是等于<html>中定義的字體大小。
利用上述相同的代碼，我們用 rem 來代替 em，查看margin-bottom的計算值究竟是多少？
h1 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem=16px */
}
p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem=16px */
}
如上述代碼所示，1rem總是等于16px（除非變更了<html>字體的大?。?。rem的大小相較于em來說意義更直接明確，也很容易理解。
在項目開發(fā)中究竟是選用 rem 還是 em 一直以來爭議不斷。一些開發(fā)人員不使用rem，因為rem使組件不那么模塊化。而另一些開發(fā)人員喜歡rem的簡單性，使用rem處理所有元素。
其實 em和rem都有各自的優(yōu)勢和劣勢，在實際項目開發(fā)中，應該結合使用兩者，利用各自的優(yōu)勢，從而實現(xiàn)較好代碼質量和顯示效果。
那么在具體的應用中如何在兩者中做選擇呢？有兩條簡單的指導原則：
上述規(guī)則太簡單了。 為了更好的理解上述規(guī)則，我們就以一個簡單的header組件為例，說明單獨使用兩者來實現(xiàn)組件遇到的問題，并體會結合使用兩者所帶來的優(yōu)勢。
這里我們只使用rem來編寫一個header組件，代碼及運行結果如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
web開發(fā)中該用 em 還是 rem 呢？
接下來，網站需要一個尺寸更大的header組件。變更CSS代碼如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
web開發(fā)中該用 em 還是 rem 呢？
從上述運行結果可以看出，文字的內邊距（padding）過小，顯示效果不協(xié)調。如果我們堅持只使用rem，只能變更css代碼如下:
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
padding: 1rem 1.5rem;
}
web開發(fā)中該用 em 還是 rem 呢？
上述代碼及運行結果，雖然達到了預期的顯示效果，但卻違背了代碼復用的原則。如果網站有多種尺寸的.header樣式，就要多次重復的定義內邊距。重復的代碼增加了項目復雜度，降低了可維護性。
這時可以利用em可以變更上述代碼如下：
.header {
font-size: 1rem;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
當元素屬性值的大小需要根據(jù)元素字體尺寸縮放時，就應該應用 em 來定義屬性尺寸。這就是前述規(guī)則中的第一條規(guī)則。
如果只使用em來定義上述組件，結果會怎樣呢？
我們變更上述代碼如下（em替換rem）：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
p {
padding: 0.5em 0.75em;
}
為更接近實際，我們引入了<p>元素，并變更html代碼如下：
div class="header header-large">名人名言</div> <p>簡單是穩(wěn)定的前提</p> <div class="header">名人名言</div> <p>簡單是穩(wěn)定的前提</p>
web開發(fā)中該用 em 還是 rem 呢？
從上述運行經果中，不難看出.header-large部分的標題并沒有和文本左對齊。而如果只使用em實現(xiàn)左對齊，則需要變更CSS代碼如下：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
padding-left: 0.375em;
padding-right: 0.375em;
}
web開發(fā)中該用 em 還是 rem 呢？
上述代碼及運行結果，雖然達到了預期的顯示效果，但卻違背了代碼復用的原則。如果網站有多種尺寸的.header樣式，就要多次重復的定義左右邊距。重復的代碼增加了項目復雜度，降低了可維護性。
解決上述問題的辦法是結合使用em和rem，即使用em定義上下邊距，使用rem定義左右邊距。變更后代碼如下：
.header {
padding: 0.5em 0.75rem;
font-size: 1em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
究竟是該使用em還是rem呢？答案應該是結合使用rem和rem。當屬性值的大小需要根據(jù)當前元素字體尺寸縮放時，就選用em，其它的情況都使用更簡單的rem。
最后提供小技巧：em及rem值的設定
em和rem 屬性值都要經過計算轉化成絕過長度單位。常用的字體尺寸用相對長度單位表示會很困難?？聪旅娉Ｓ米煮w值的rem表示（基本字體尺寸是16px）：
如上述列表所示，上述尺寸值的表示及計算都不分的不便。為了解決上述問題要用到一個小技巧，即著名的 "62.5%"技術。具體請查看下述代碼：
body { font-size:62.5%; } /*=10px */
h1 { font-size: 2.4em; } /*=24px */
p { font-size: 1.4em; } /*=14px */
通過62.5%的設定，就可以很容易用em來定義具體屬性的尺寸了（10倍的關系）。
而rem，則需要采用如下的方式：
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
