做前端的應該對em不陌生，不是什麼罕見的單位，是相對單位，參考物是父元素的font-size，具有繼承的特點。如果字型大小是16px（瀏覽器的預設值），那麼 1em = 16px。
不過，這樣使用很複雜，很難很好的與px進行對應，因此，前端開發的前輩們總結了乙個經驗
body
百分比相信大家更不會陌生了，百分比一般寬泛的講是相對于父元素，但是並不是十分準確。
1、對於普通定位元素就是我們理解的父元素
2、對於position: absolute;的元素是相對於已定位的父元素（offset parent）
3、對於position: fixed;的元素是相對於 viewport
viewport：可視視窗，也就是瀏覽器的window那麼大。
例外情況
1、使用了padding、margin 等，實際百分比和你想要的百分比是有區別的。（關於這個，解決方法之一，就是我們可以使用css3的calc()屬性，具體，您請繼續往下看，在文章最後我會解釋。）
2、line-height百分比的一些情況，通常結果是百分比 計算後的值。（關於這個，您請繼續往下看。。。）
rem支援ie9及以上，意思是相對於根元素html（網頁），不會像em那樣，依賴於父元素的字型大小，而造成混亂。使用起來安全了很多。
html body h1
ie10＋ 和現代瀏覽器都支援這兩個單位。
vw viewport寬度，1vw等於viewport寬度的1%
vh viewport高度，1vh等於viewport高的的1%
vw和vh會隨著viewport變化自動變化，再也不用js控制全屏了。
甚至有些人喪心病狂的字型大小都用vw和vh控制，來達到字型和viewport大小同步的效果。
ie10+ 和現代瀏覽器都已經支援vmin
webkit瀏覽器之前不支援vmax，新版已經支援，所有現代瀏覽器已經支援，但是ie全部不支援vmax
vmin vw和vh中比較小的值
vmax vw和vh中比較大的值
這兩個屬性也會隨著viewport變化
ie9+ 和現代瀏覽器都已經支援,這兩個單位時根據當前font-family的相對單位。
ch 字元0的寬度
ex 小寫字元x的高度
如下圖：
當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣。
第二部分移動h5開發入門知識：css3的新單位演算法上面我們已經提到了calc()，下面我們就具體說一說吧！
瀏覽器支援ie9+、ff4.0+、chrome19+、safari6+
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：
.haorooms
例如，我們margin是20px。那麼我們就可以寫成
.haorooms
.box
現在就說一下行高帶單位和不帶單位的區別，例如下面的例子：
line-height:26px; 表示行高為26個畫素
line-heigth:120%;表示行高為當前字型大小的120%
line-height:2.6em; 表示行高為當前字型大小的2.6倍
line-height:2.6;表示行高為當前字型大小的2.6倍
希望以上的這些移動h5開發入門知識點，對各位的h5前端開發學習有一定的幫助. 同時25學堂奉上乙個純css3寫的載入動畫特效。
H5移動端開發入門知識以及CSS的單位彙總與用法
做前端的應該對em不陌生，不是什麼罕見的單位，是相對單位，這種技術需要乙個參考點，一般都是以的 font size 為基準。比如說我們使用 1em 等於 10px 來改變預設值 1em 16px 這樣一來，我們設定字型大小相當於 14px 時，只需要將其值設定為 1.4em 前端開發的前輩們總結了乙...
h5移動端css開發總結
font size 12px transform scale 10 12 需要注意這個方式雖然縮小了字型，但該文字元素所佔據的原寬高大小並不會跟著縮小，所以很多時候還需要考慮文字位置和間距的問題。一般文字位置需要結合 transform origin 屬性來設定。例如設定文字水平居左 垂直居中 tr...
移動端h5開發基礎
移動端h5開發基礎知識 一.手機端開發頁面必須要加一段 注 這段 的主要意思是 讓頁面寬度等於裝置寬度，縮放比例為1，禁止使用者縮放。用於檢測視口，主要的效果就是取消下面的滾動條，讓頁面適應螢幕。二.為自己的頁面設定最大寬度和最小寬度 主要作用是在螢幕足夠大的時候，頁面也不會失真。三.相容手機螢幕大...