web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！
?
作為一名前端開發人員，css中的長度單位，都是我們在工作中非常熟悉的名詞，因為沒有它們，我們就不能聲明某個字符應該多大，或者某些圖像周圍應該留白多少，甚至有時候能導致css不能進行正常工作，所以在很多css屬性中，它們都是依賴于長度單位來顯示各種頁面元素。
?
1、長度單位包括哪些？
?
?長度單位，其實在我們的生活中，也非常常見，例如，厘米、毫米、英寸，還有經常接觸到的像素（px），元素的字體高度（em）、字母x的高度（ex）、百分比（%）等等這些單位，但是我們都可以將它們歸結為兩大類別：第一類，就是絕對長度單位；第二類，就是相對長度單位。
?
2、絕對長度單位
?
那什么是絕對長度單位？具體有哪些？又是怎么進行應用的呢？
絕對長度單位比較好理解，它就是一個固定的值，一個真實的物理值，它不隨設備或者受別的因素影響的長度單位。
具體的絕對長度單位主要包括以下幾個：
1）、cm，厘米：一個長度計量單位，1m=100cm。
2）、mm，毫米：與厘米一樣，也是一個長度計量單位，1cm=10mm；毫米同時還是降雨量的計量單位。
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開發中，運用比較少，主要是因為絕對長度單位不利于頁面屏幕的渲染，他們更多的是被用在印刷、打印等方向。
?
3、相對長度單位
相對長度單位，我們都見得比較多，例如，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女。最后，說一句，本人也是女子一枚，請大家以后在微信上，不要再叫我哥了，叫我小二就好。女子節，祝天下女子越活越年輕！
?
?
轉載于:https://www.cnblogs.com/webxiaoer/p/6626186.html
總結
以上是生活随笔為你收集整理的web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Gulp 前端自动化构建
- 下一篇： day17-jdbc 6.Connect