px哎垦、em和rem都是網(wǎng)頁設計中的長度單位棵譬。px是最常用的單位，它是 Pixel 的縮寫代表像素当叭，它是計算機圖像顯示的最小單位；em（font size of the element）它是一個相對大小的單位愿棋，它的大小會相對于它的父級元素的字體大锌普埂；rem（font size of the root element）它也是一個相對大小的單位糠雨，但是它相對于根元素字體的大胁哦谩；
px
px單位就不用多解釋了，非常常見琅攘。
em
em是為了解決長度單位在不同縮放比例下瀏覽器中能夠更好的顯示的問題垮庐，它是一個相對大小的單位，但是它是相對于其父級元素的大小坞琴，這樣導致了一個問題哨查，在現(xiàn)在復雜的網(wǎng)頁下，層層嵌套的元素最終導致很難控制大小剧辐。
html {
font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.2em; /*1.2em × 10 = 12px */
}
p {
font-size: 1.2em; /*1.2em × ? = ? */
}
上面的例子我們可以看到寒亥，瀏覽器默認字體大小為16px，html的字體大小為16px * 62.5% = 10px荧关；body的字體大小相對于html元素溉奕，計算出來為12px；但是p的大小很難計算忍啤，因為我們不知道它的父級元素的字體大小到底是多少加勤，它的父級元素字體大小可能是12px、也有可能是20px同波，它太難控制了鳄梅。
rem
CSS3 的出現(xiàn)讓我們對相對的尺寸有了更加穩(wěn)定的設置方法：那就是rem。rem它是相對于根元素來計算大小的：
html {
font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.2rem; /*1.2rem × 10 = 12px */
}
p {
font-size: 1.4rem; /*1.4rem × 10 = 14px */
}
這樣一來未檩，我們可以很好的來控制長度單位的大小戴尸，它是一旦設置就是一個穩(wěn)定的值；我們經(jīng)常在響應式設計中采用這樣的長度單位讹挎，通過媒體查詢可以讓長度單位更加符合不同屏幕大行３唷：
html {
font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */
}
@media screen and (min-width: 400px) {
html {
font-size: 75%; /* 12 ÷ 16 × 100% = 75% */
}
}
@media screen and (max-width: 319px) {
html {
font-size: 50%; /* 8 ÷ 16 × 100% = 50% */
}
}
