web開發中的長度單位（px,em,ex,rem），如何運用，看完這篇就夠了！
做爲一名前端開發人員，css中的長度單位，都是咱們在工做中很是熟悉的名詞，由於沒有它們，咱們就不能聲明某個字符應該多大，或者某些圖像周圍應該留白多少，甚至有時候能致使css不能進行正常工做，因此在不少css屬性中，它們都是依賴於長度單位來顯示各類頁面元素。css
一、長度單位包括哪些？html
長度單位，其實在咱們的生活中，也很是常見，例如，釐米、毫米、英寸，還有常常接觸到的像素（px），元素的字體高度（em）、字母x的高度（ex）、百分比（%）等等這些單位，可是咱們均可以將它們歸結爲兩大類別：第一類，就是絕對長度單位；第二類，就是相對長度單位。前端
二、絕對長度單位web
那什麼是絕對長度單位？具體有哪些？又是怎麼進行應用的呢？瀏覽器
絕對長度單位比較好理解，它就是一個固定的值，一個真實的物理值，它不隨設備或者受別的因素影響的長度單位。微信
具體的絕對長度單位主要包括如下幾個：網絡
1）、cm，釐米：一個長度計量單位，1m=100cm。工具
2）、mm，毫米：與釐米同樣，也是一個長度計量單位，1cm=10mm；毫米同時仍是降雨量的計量單位。post
3）、in，英寸：這個是美國尺子上都有的單位，1英寸=2.54釐米，12英寸=1英寸。字體
4）、pt，點（points）：一個印刷度量單位，1英寸至關於72點，例如，將元素p設置爲24點的話，就是1英寸的三分之一（1/3）；因此，p{font-size：24pt；}與p{font-size：0.33in；}是等價。
5）、pc，派卡（Picas）：一個印刷術語，1派卡至關於12點，6派卡至關於1英寸。
固然，因爲這些單位都是絕對長度單位，在咱們的web開發中，運用比較少，主要是由於絕對長度單位不利於頁面屏幕的渲染，他們更多的是被用在印刷、打印等方向。
三、相對長度單位
相對長度單位，咱們都見得比較多，例如，px，em，ex，rem；這些都是相對長度單位。
1）px，像素：px是相對於顯示器屏幕分辨率而言。用px設置字體大小時，可能比較穩定和精確。可是這種方法存在一些問題，例如：IE沒法調整那些使用px做爲單位的字體大小；國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；Firefox可以調整px和em，rem，可是96%以上的中國網民仍是喜歡使用IE瀏覽器。爲了保證用戶體驗和web頁面效果，因此在web開發中還引入了「em」這個長度單位。
2）em，元素的字體高度：em是相對於父元素的屬性值而計算的，因此em是非具體的數值。它須要一個參考點，通常都是以<body>的「font-size」爲基準。任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合：1em= 16px。有時爲簡化font-size的換算，須要在css中的body選擇器中聲明font-size=62.5%,此時1em=16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說換算時只需將原有px數值除以10，而後換上em做爲單位便可。 em 的值並非固定的；em的值會繼承父級元素的字體大小。
3）ex，全部字體元素中小寫x的高度：這個主要與字體有關，不一樣的字體，即便設置了相同的字體大小，可是ex的值也有可能不一樣，主要是由於字體的x高度可能不一樣。不過這個在咱們實際開發中運用比較少，通常設置em後，ex就會默認爲em的一半，也有爲計算方便，將1ex假設等於0.5em,緣由在於，大多數的字體的小寫字母都是相應大寫字母高度的一半。
4）rem，元素字體高度：與em相比較多了一個"r"，是CSS3新增的一個相對單位，是root em，簡寫rem，這個單位與em的區別在於，使用rem爲元素設定字體大小時，rem相對的只是HTML根元素。經過rem，既能夠作到只修改根元素就能夠成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。 目前，除IE9如下的版本外，全部瀏覽器均已支持rem。
另外，咱們在開發中還須要注意兩點：
第一，若rem沒有在根元素（html字體）指定參照值，那瀏覽器默認1 rem就是16px,若rem有指定值，則1rem就是等於指定值 。
第二，html設置爲62.5%或者10px時會失效，是由於小於12px或者75%的字體大小不支持換算。這可能與有些瀏覽器不支持12px如下的大小有關。因此，使用rem單位，html的字體默認字體大小必須設置爲12px或以上。若小於12px則瀏覽器換算時自動默認字體爲12px。
寫在最後
在開發中，咱們到底如何選擇長度單位，須要根據實際開發中的具體需求來，例如，像咱們這邊有的項目，只需在pc上瀏覽，不須要在移動端進行瀏覽的，也不須要作響應式開發的，其實整個頁面單位，用px,就能夠知足開發需求了；而有的項目，可能須要作響應式開發的，那就要看具體狀況而定，可是無論怎麼樣，你把長度單位的基本屬性與本質弄明白了，怎麼選用，是很是簡單的事情，今天的這篇文章，但願能給你們一點啓發，也但願能幫助到那些對基礎知識點還不瞭解的同窗。
最後，我跟你們分享一個在線px,em,rem單位轉換工具，地址：http://pxtoem.com/；在這裏，我就不截圖了，由於我本身配置的二手電腦，又花屏了，我要寫完這篇稿子，準備拆機箱了，一個姑娘家，家裏什麼東西壞了，都是本身修，電腦壞了，本身修，無線網絡不通了，本身修，網絡電視，也要本身搞，這就是找個IT女的好處，今天是三八婦女節，請咱們的男同胞們，好好珍惜你身邊的IT女。最後，說一句，本人也是女子一枚，請你們之後在微信上，不要再叫我哥了，叫我小二就好。女子節，祝天下女子越活越年輕！
- 1. pt， px，em，ex，in等這類長度單位
- 2. CSS單位：px、em、rem
- 3. CSS 單位 px rem em
- 4. 完全弄懂css中單位px和em,rem的區別
- 5. 完全弄懂css中字體的單位px和em,rem,pt
- 6. [轉]完全弄懂css中單位px和em,rem的區別
- 7. 萬字長文！位運算面試看這篇就夠了！
- 8. CSS：如何使用 px、em、rem？
- 9. CSS尺寸單位 % px em rem 詳解
- 10. CSS -- 字體單位（px、em、rem）
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • Redis在Java Web中的應用 - Redis教程
- • PHP開發工具
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
-
每一个你不满意的现在，都有一个你没有努力的曾经。