由於最近在做公司移動專案的開發，所以在開始專案之前，我第一步要做的就是統一單位。在之前寫pc端**時，都是使用px作為長度單位，在接下來的手機專案中為了實現響應式開發，開始使用em，然後出現了乙個可怕的問題，那就是當獲得焦點時，整個頁面會放大，至於為什麼會出現這種情況，然後又該怎麼解決呢？當初真的是弄得頭都大了，後來沒有辦法，我的解決辦法就是把會放大的頁面裡面有em單位的全部換為px，暫時的解決了問題，但是我相信強大的前端工程師們可能會有更完美的解決辦法。我們的設計師是按照640的寬度去設計的，實際設計圖的寬度是640*2這樣做的目的是為了在移動端能高畫質顯示。所以在準備該專案之前，為了避免再次出現那麼尷尬的境地，我查閱了諸多資料，發現rem似乎還挺有意思的，但是現在貌似用他的人很少，其實rem不只是能應用到字型上面，還可以應用到長度和寬度上面。接下來我先講解一下css單位px、em和rem的含義以及它們之間的區別。
一、css單位px、em和rem的含義以及它們之間的區別
1.首先介紹一下px
px就是css中最基本的長度單位了，用px做單位基本上沒什麼問題，可以做到讓頁面按套路精確的展現！
可但是！但可是！如果全篇用px布局會暗藏乙個蛋疼的問題，就是當使用者和ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，因此有磚家倡導使用em替代px。。。。。
2.接下來介紹一下em
如果你從上到下閱讀此文，你應該已經知道了em出現的原因，下面說說em的特性，簡單的講px是絕對單位，1px就是1px，2px就是2px，以此類推，而em是相對單位，em相對的基準點就是瀏覽器的字型大小，瀏覽器預設字型大小是16px，也就是1em預設等於16px，如果你想給某個文字設定為14px，就這樣寫 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那麼就是15/16=0.938em, 例如margin:0.938em; 依次類推，樣式表都用em來寫的話，就可以解決ctrl+，ctrl-時造成的頁面錯亂問題,常用em對照表如下
這時候有人和我一樣就會抱怨了，我的數學是體育老師教的，除以16我怎麼可能算明白，那好辦你可以在根節點上重定義基準字型大小 html ，此時頁面基準字型大小就是 16px * 62.5% = 10px , 那麼此時 1em = 10px，那麼此時14px = 1.4em，15px=1.5em，依次類推，就算你數學是要飯的教的應該也會算了吧-。-！
可但是！但可是！問題又來了，em準確的說是相對于父節點的字型大小來計算的，如果自身定義了字型大小那麼就相對自身字型大小來計算，舉例如下：
html
.box-0
.box-1
看明白了吧，在整個頁面內1em並不是乙個固定不變的值，1em不停的變換，再加上數學是體育老師教的，這不是自作孽嗎。。。沒關係，css3為我們引入乙個新的單位就是rem可以解決這個問題
3.最後介紹一下主角rem
rem和em一樣也是乙個相對單位，為了方便理解，我們就理解rem為root em，顧名思義rem只相對跟節點計算，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，預設1rem=16px; 同理你可以設定html 那麼1rem就等於10px，以此類推。。。
宣告一下：rem是css3屬性，沒錯！這就是說屌絲ie678不支援rem屬性，只有chrome、firefox等高富帥支援！那麼我們就在ie678中用px做相容處理，例如：
.box
二、用rem來做響應式開發
1、設定對應的響應式的html rem比例
我們平常在使用長度單位都會使用px，但是在做上面的響應式的時候，需要用rem或者百分比的單位，大家可以看demo**
[html] view plain copy
html
body
p
[html] view plain copy
html
@media only screen and (min-width: 481px)
} @media only screen and (min-width: 561px)
} @media only screen and (min-width: 641px)
}
html
@media only screen and (min-width: 481px)
} @media only screen and (min-width: 561px)
} @media only screen and (min-width: 641px)
}
上面展示的是怎麼通過計算獲取到不同解析度下的html font-site百分比的值。實際開發如果設計師是按照640的寬度去設計的，我們就按照最大的640去切圖，切圖的時候如果我們要設定margin怎麼banner，設計圖的值加入是10px的間距，我們通過640的比例去計算：
margin-top:.5rem; /*10 ÷ 20 = 0.5*/
padding-top:1rem /* 20 ÷ 20 =1 */
上面分別是設計圖上的間距10px和20px計算成rem的方法，大家可以以此類推，如果你的設計圖是640設計的就可以用上面的方法，反正每次以最大的值來計算就可以了。
實際開發中大家最常設定的估計就是height width值了，為了做到各個裝置下長度自己相應，許多開發人員會用百分比來做，這個是沒有問題，但是其實很多場景下用rem比百分比更加靈活，在我實際開發中，一般我只在大塊的div布局裡面用百分比，元素的設定一般都用rem來。例如：
height:100px; /* 100 ÷ 20 = 5rem;*/
width:50px; /* 50 ÷ 20 = 2.5rem;*/
其實就連border我們也可以用rem來做，但是貌似現在的安卓手機對border用rem單位有一小部分不支援，在我開發測試發現了，高版本的安卓瀏覽器支援，但是低版本的有許多都不支援，具體要不要使用就看你們自己的情況。
border:.2rem solid #cccccc;px,em和rem的區別
三者都是相對長度單位 一 px 畫素 畫素是相對於螢幕顯示器解析度而言的。畫素特點 字型大小被定死，不會因為縮放改變二 em em是相對於當前物件的文字尺寸，如果沒有設定，則相對於瀏覽器的預設字型尺寸 特點 1 em的值不是固定的 2 em的可以繼承父級元素的字型大小 注意 所有瀏覽器的預設字型大小...
px em和rem的區別和使用案例
由於最近在做公司移動專案的開發，所以在開始專案之前，我第一步要做的就是統一單位。在之前寫pc端 時，都是使用px作為長度單位，在接下來的手機專案中為了實現響應式開發，開始使用em，然後出現了乙個可怕的問題，那就是當獲得焦點時，整個頁面會放大，至於為什麼會出現這種情況，然後又該怎麼解決呢？當初真的是弄...
px em 和rem之間的區別
背景 px 畫素是相對於顯示器螢幕解析度而言的相對長度單位。pc端使用px倒也無所謂，可是在移動端，因為手機解析度種類頗多，不可能乙個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。em 繼承父級的。假設html的font size預設為16px，body字型大小定義為50 那麼在bod...