前端開發過程中，尺寸單位是我們必須用到的，下面我們對css中常見的幾種尺寸單位px,em,rem,rpx進行逐一介紹
在這之前，需要先對幾個概念進行普及介紹
基本概念
（以下概念讀起來可能有些晦澀，如果看不懂也沒關系）
像素
它不是自然界的物理長度，指基本原色素及其灰度的基本編碼。
css中的像素隻是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。
在為桌面浏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。
在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素确實是等于一個屏幕物理像素的。
後來随着技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。
就是我們開發過程中使用的css中的px
設備像素比（device pixel radio）
設備像素比 = 物理像素 / 設備獨立像素，單位是dpr！（device pixel radio）
Retina屏幕
所謂“Retina”是一種顯示标準，是把更多的像素點壓縮至一塊屏幕裡，從而達到更高的分辨率并提高屏幕顯示的細膩程度。也被稱為視網膜顯示屏 ——百度百科
因為Retina屏幕的出現，在pc端默認情況下，css中的1px等于1物理像素，但在移動端1px不一定等于1物理像素，比如說iPhone的設備獨立像素是375 667，因為它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素為 750 1334
在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈現的大小(物理尺寸)是一緻的，不同的是1px所對應的物理像素個數是不一緻的。
在普通屏幕下，1px 對應 1個物理像素(1:1)。 在Retina屏幕下（dpr=2），1px對應 2x2個物理像素(1:4)。
你會發現，在移動端開發中使用了圖片（img标簽），2倍圖要比1倍圖清晰，就是這個緣故
px
默認情況下像素px是相對于屏幕分辨率而言，比如說我們的屏幕分辨率是1440 X 900，說的就是像素1440px X 900px；
這裡會遇到另一種情況
### 浏覽器縮放
縮放是縮放CSS像素(縮放比例為1時,一個CSS像素等于一個屏幕像素)，就是在屏幕分辨率不變的情況下，用戶對浏覽進行了縮放
強調一點，用戶的縮放行為是對浏覽器進行的，縮放的是css像素，而非分辨率，分辨率是屏幕的分辨率，不論你怎麼縮放當前頁面，屏幕分辨率都不會改變
我們知道在移動端可以在一定程度上控制用戶的縮放行為，也可以禁止用戶縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content屬性值 :
- width:可視區域的寬度，值可為數字或關鍵詞device-width
- height:可視區域的高度，值可為數字或關鍵詞device-height
- intial-scale:頁面首次被顯示是可視區域的縮放級别，取值1.0則頁面按實際尺寸顯示，無任何縮放
- maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級别，
- maximum-scale用戶可将頁面放大的程序，1.0将禁止用戶放大到實際尺寸之上。
- user-scalable:是否可對頁面進行縮放，no 禁止縮放
但是在pc端就麻煩了
windows：
- ctrl /-
- ctrl 滾輪
- 浏覽器菜單欄
mac：
- cammond /-
- 浏覽器菜單欄
由于浏覽器菜單欄屬于系統軟件權限，沒發控制，我們可以通過js控制ctrl/cammond /- 或 windows下ctrl 滾輪 縮放頁面的情況
em
本人在實際開發過程中并沒有使用過em單位，但是後面要說的rem是基于em的，所以，對em進行簡單介紹
em 是相對長度單位。相對于當前對象内文本的字體尺寸。如當前對行内文本的字體尺寸未被人為設置，則相對于浏覽器的默認字體尺寸。
- em的值并不是固定的；
- em會繼承父級元素的字體大小；
- 任意浏覽器的默認字體高都是16px。所有未經調整的浏覽器都符合: 1em=16px。body選擇器中聲明Font-size=62.5%<==>1em=10px。
看個栗子吧
<body> <style> html { font-size: 50px; } .my-div { width: 100%; height: 500px; margin-top: 50px; background-color: gray; font-size: 40px; } .my-div .parent-font { font-size: 30px; } .my-div .parent-font .child-font { font-size: 0.5em; } </style> <div class="my-div"> <p class="parent-font"> 我是父級文字 <span class="child-font">我是子級文字</span> </p> </div> </body>
html代碼中，
第一級，html的 font-size: 50px;
第二級，my-div 的 font-size: 40px;
第三級，parent-font 的 font-size:30px;
第四級，child-font 的 font-size: 0.5em;
我們通過浏覽器查看，發現第四級的fong-size為15px；
我們取消第三級parent-font 的字體大小
我們通過浏覽器查看，發現第四級的fong-size為20px；
當我們取消第三級font-size後，第三級的字體大小為40px；
所以我們說em的字體大小不是固定的，em的大小取決于父級的字體大小
當父級的字體大小為20px，子級的1em就是20px
當父級的字體大小為30px，子級的1em就是30px
那麼說font-size存在着繼承父級的特點
我們在第一級html中設置font-size，第二級繼承第一級，第三級繼承第二級，第四級繼承第三級，以此類推
每一級都繼承自它的父級，也就是說每一級的em所代表的px大小都不是固定的，因為他們的父級不是同一個，所以em的應用場景并不多。
那麼如果是em的都繼承自同一個地方，是不是可以解決很多問題呢？
這時候rem出現了
rem
rem 是CSS3的一個相對單位（root em，根em）
使用rem為元素設定字體大小時，仍然是相對大小，但相對的隻是HTML根元素
隻要html的font-size大小不變，1rem所代表的font-size大小就不會變，rem隻取決于html的font-size
rem解決了哪些問題
移動設備的寬度是各種各樣的，每個設備的dpr也不同，換句話說就是不同設備每一行的物理像素數不同，能顯示的css的px數也不同，
如果我們寫一個div，寬度是375px，375px在這個屏幕（iPhone6）上是剛剛滿屏，因為這個屏幕寬度剛剛是375px( 設備獨立像素)，
當我們換另一個寬度是414px的設備（iPhone6Plus）時，這個寬度375px的div就無法鋪滿這個屏幕，同樣的當換一個iPhone5（320px），又會出現滾動條，安卓機的寬度更是五花八門，使用media媒體查詢不靠譜，因為它不能覆蓋所有的機型寬度
我們之前說rem的大小是相對于html的font-size的，如果html的font-size根據不同設備的寬度做動态計算，問題就會得到解決
我們寫頁面都是根據UI設計稿來做的，我們假設UI設計稿的寬度是750px（750px是常規寬度，當然也可以是640px或是其他寬度，但是整個項目，寬度必須統一），唯一不變就是就屏幕寬度，我們的html的font-size（rem）隻取決于設備寬度
于是
document.documentElement.style.fontSize = 100 * ( document.documentElement.clientWidth / 750) 'px'
html的font-size：document.documentElement.style.fontSize
設備的寬度：document.documentElement.clientWidth
750：UI設計稿的寬度
為了方便計算我們将font-size x 100，方便計算（乘100不是必須的，我接觸過一些項目就不是乘以100，但是UI設計稿中使用了sketch做了動态計算，但我還是建議乘100，不然遇到psd的設計圖就很麻煩了）
對上面的js做些完善
const fontFun = function () { let docEl = document.documentElement let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' const recalc = function () { let clientWidth = docEl.clientWidth if (!clientWidth) return docEl.style.fontSize = 100 * (clientWidth / 750) 'px' } if (!document.addEventListener) return window.addEventListener(resizeEvt, recalc, false) window.addEventListener('pageshow', recalc, false) document.addEventListener('DOMContentLoaded', recalc, false) } export { fontFun }
對以上代碼不做過多解釋
也可以這樣寫
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth if (!clientWidth) return docEl.style.fontSize = 100 * (clientWidth / 750) 'px' } if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false) win.addEventListener('pageshow', recalc, false) doc.addEventListener('DOMContentLoaded', recalc, false) })(document, window)
iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px
iPhone6(375px)下html的font-size:50px,1rem=50px
iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px
rem是繼承自html的font-size，但是小程序中沒有html，那怎麼辦呢？
rpx
我不基于html的font-size了，我基于一個别的值就行了，你也不需要計算這個值，我給你計算了，這就是rpx。
最終的效果就是，你開發時在iphon6的設計稿上量了多少px，就寫多少rpx就行了，完美适配，perfect！
,
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
